Pada eksperimen 1 menguji konektivitas Facebook Shop dengan Google Web Apps. Pada eksperimen 2 kali ini dikembangkan lagi dengan menyimpan ke Google Sheets dengan bantuan Apps Script.
GOOGLE SHEETS SEBAGAI DATABASE
Buka Google Drive dan buatlah satu Google Sheets yang akan menampung data dari Facebook Shop.
Buatlah format tampilan seperti berikut ini dengan jumlah kolom sesuai jumlah parameter yang dihantarkan dalam link request Facebook Shop. Beri nama sheet misalkan DATA
Kita akan membutuhkan ID dari Google Sheets yang bisa didapatkan dari bagian link Sheets seperti gambar di atas, misalkan link dari Sheets sebagai berikut, ID Sheets yang berwarna merah. Catat dan simpan anda akan memerlukannya nanti saat meracik di Apps Script.
https://docs.google.com/spreadsheets/d/1xCrYKgONnHHZX0nXKvq18Js4a_wo00HGOZF9U8P8OCw/edit#gid=0
Identifikasi Sheets dengan ID tidak akan berpengaruh sekalipun Sheets berganti nama filenyaSiLiKiDi
MODIFIKASI APPS SCRIPT
Konstanta Google Sheets ID
Buka Google Apps Script, tampung ID Sheets dalam sebuah konstanta misalkan bernama googleSheetID dan tempatkan setelah konstanta googleWebAppURL
Konversi ke JSON Object
Diasumsikan anda sudah paham dengan materi eksperimen 1 yang mengkonversi request dari Facebook ke dalam bentuk string JSON seperti tampak berikut ini dan akan fokus mengolah bagian parameter.
{
"parameters": {
"produk":[
"kaos"
],
"warna":[
"hitam"
],
"harga":[
"100000"
],
"toko":[
"facebook"
],
"fbclid":[
"IwAR3FFd6elMBhZA14E9XTtbc8"
]
},
"contentLength":-1,
"contextPath":"",
"queryString":"produk=kaos&warna=hitam&harga=100000&toko=facebook&fbclid=IwAR3FFd6elMBhZA14E9XTtbc8",
"parameter": {
"produk":"kaos",
"warna":"hitam",
"harga":"100000",
"toko":"facebook",
"fbclid":"IwAR3FFd6elMBhZA14E9XTtbc8"
}
}
Setelah kita mengetahui struktur dari response Web Apps dan fokus ke bagian parameter, maka kita bisa menggunakan event object parameter yang disediakan Apps Script. Selengkapnya tentang request paramaters yang ditangani bisa disimak dimari.
Kali ini variabel parameterToko tidak perlu menggunakan JSON.stringify, tetapi cukup dengan memanggil e.parameter. Dengan demikian selanjutnya kita tinggal tambahkan objek parameter di belakangnya, misalnya dideklarasikan dengan statement parameterToko.produk parameterToko.warna dst...
Abaikan saja parameter fbclid pelacak otomatis dari FacebookSiLiKiDi
Agar lebih ringkas maka statement tersebut ditampung dalam variabel baru yang masing-masing diberi nama sesuai parameternya. Sehingga cukup dengan memanggilnya dengan produk, warna dst...
function doGet(e) {
var parameterToko = e.parameter;
var produk = parameterToko.toko;
var warna = parameterToko.warna;
var harga = parameterToko.harga;
var toko = parameterToko.toko;
}
Menyimpan ke Google Sheets
Sebelumnya dibuat variabel baru bernama namaSheet untuk mengidentifikasi bagian sheet yang menjadi penyimpanan data. Lalu buat variabel baru lagi untuk mengidentifikasi file Google Sheets mana yang dipilih dengan menggunakan fungsi openById() dan getSheetByName()
function doGet(e) {
var parameterToko = e.parameter;
var produk = parameterToko.toko;
var warna = parameterToko.warna;
var harga = parameterToko.harga;
var toko = parameterToko.toko;
var namaSheet = "DATA";
var sheet = SpreadsheetApp.openById( googleSheetID ).getSheetByName( namaSheet );
}
Setelah Google Sheets tujuan diaktifkan dan disiapkan, langkah selanjutnya dengan langsung menyimpan nilai parameter ke Google Sheets dengan menggunakan fungsi appendRow()
function doGet(e) {
var parameterToko = e.parameter;
var produk = parameterToko.toko;
var warna = parameterToko.warna;
var harga = parameterToko.harga;
var toko = parameterToko.toko;
var namaSheet = "DATA";
var sheet = SpreadsheetApp.openById( googleSheetID ).getSheetByName( namaSheet );
sheet.appendRow([ produk, warna, harga, toko ]);
}
Dengan tersimpannya ke Google Sheets anda bisa lebih lanjut berimprovisasi mengolahnya sebagaimana yang biasa anda lakukan di Excel.
Tampilkan Notifikasi ke Laman HTML
Setelah tersimpan di Google Sheets, selanjutnya beritahu user dengan mengirimkan notifikasi ke laman HMTL.
function doGet(e) {
var parameterToko = e.parameter;
var produk = parameterToko.toko;
var warna = parameterToko.warna;
var harga = parameterToko.harga;
var toko = parameterToko.toko;
var namaSheet = "DATA";
var sheet = SpreadsheetApp.openById( googleSheetID ).getSheetByName( namaSheet );
sheet.appendRow([ produk, warna, harga, toko ]);
return HtmlService.createHtmlOutput(
"PRODUK : " + produk
+ "<br>" + "WARNA : " + warna
+ "<br>" + "HARGA : " + harga
+ "<br>" + "TOKO : " + toko
);
}
UPDATE FACEBOOK SHOP
Setiap kali anda melakukan perubahan jangan lupa untuk menyimpannya dan men-deploy ulang dengan New Deployment
Masalahnya setiap kali deploy ulang, Google akan men-generate token baru pada URL Web Apps, jadi anda terpaksa harus memperbarui pula link di Facebook Shop. Simak eksperimen 1 cara merakit link Web Apps untuk dipasang di Facebook Shop.
Sampai sini anda sudah berhasil mengintegrasikan Facebook Shop dengan Google SheetsSiLiKiDi
FINAL SCRIPT
Final Script dapat diunduh di repository.
ARTIKEL TERKAIT
- Facebook Shop Dengan Google Apps Script - EKSPERIMEN #1
- Facebook Shop Dengan Google Apps Script - EKSPERIMEN #3
Dapatkan skrip semua materi di repository
Dukung donasi agar tutorial ini tetap operasional:
SiLiKiDi
Komentar
Posting Komentar