Facebook Shop Dengan Google Apps Script - EKSPERIMEN #3

Eksperimen 3 merupakan pengembangan dari Eksperimen 2. Yang membedakan kali ini lebih fokus di keluaran HTML dan bentuknya yang modular untuk memudahkan debugging.

Jadi di sini tidak lagi dibahas penanganan di Facebook Shop dan Google Sheets secara rinci lihat Eksperimen 1 dan Eksperimen 2. Untuk kendala inisiasi saat deployment pertama simak di tips ini.

PENERAPAN MODULAR

Google Apps Script mendukung modularitas scripting yang tidak memusatkan di satu file melainkan merecahnya menjadi modul-modul tersendiri untuk kemudahan debug dan pengelolaan.

Pada eksperimen 3 akan direcah dalam empat modul:

• Code.gs : script utama dari ekseprimen 3
• Code-page.html : laman HTML antarmuka untuk user
• Code-css.html : berisi stylesheet tampilan
• Code-js.html : berisi javascript tambahan

Code.gs adalah file yang menjadi core engine. Di sini proses pengolahan parameter dari Facebook Shop disimpan ke Google Sheets dan terdapat fungsi include() untuk mengintegrasikan modul-modul.

Code-page.html

File ini adalah tampilan antarmuka yang akan dilihat user dan di sini pula kita integrasikan modul-modul lainnya. Code-page.html menyedot konten dari Code-css.html dan Code-js.html lalu menempelkannya dengan fungsi include() yang dibuat di Code.gs

Code-css.html

File ini dikondisikan khusus berisi CSS untuk menghias tampilan keluaran HTML ke user. Kita akan mencoba menggunakan Google Fonts dan custom tombol.

Code-js.html

Di dalam file ini dikondisikan khusus berisi custom javascript untuk membuktikan bahwa Google Apps Script memberikan keleluasaan untuk eksekusi javascript di luar file Code.gs

Built-in fungsi google.script.url.getLocation() untuk mencoba mengekstrak parameter kiriman dari Facebook Shop, lalu kita eliminir parameter yang tidak diperlukan seperti fbclid. Lalu dibuat elemen DOM baru untuk menampung hasil ekstrak agar tampil di keluaran HTML user dengan fungsi document.createElement().

HASIL TAMPILAN

Tampilan yang diharapkan seperti gambar berikut ini sebagai respon saat user mengklik tombol Lihat di situs web di Facebook Shop.

TAMPIL TAK SESUAI URUTAN

Saat anda menyusun urutan tampilan di file Code-page.html, hasil akhir memperlihatkan bagian include akan selalu diproses terakhir. Sehingga sekalipun anda menempatkan tombol sesudah bagian include akan selalu ditempatkan sebelumnya pada hasil akhir.

Ini karena proses delivery javascript bersifat asynchronous, konsep yang tidak merujuk pada urutan scripting melainkan siapa yang paling cepat diproses maka ia yang akan lebih dulu dikirimkan [Asynchronous Programming]. Untuk mengakalinya anda perlu ekspansi script dengan melibatkan tiga opsi fungsi: Callbacks, Promises, atau Async-Await.

WARNING BAR

Perintah HtmlService.createTemplateFromFile("Code-page") menghasilkan keluaran HTML yang meng-embed iFrame ke dalam sebuah tabel. Tampilan paling atas muncul Warning-bar otomatis dari Google:

This application was created by another user, not by Google.

Anda mungkin akan tergoda untuk menghapus warning-bar yang selalu tampil paling atas dan terkesan kurang eleganSiLiKiDi

Karena bentuknya iFrame dalam iFrame, seharusnya selector javascript berikut bisa mengakses area warning-bar dan anda bisa gunakan removeChild() untuk menghapusnya. Misalkan anda coba dulu dengan mengubah warna latarnya:

window.parent.window.parent.document.body.style.backgroundColor = "yellow";

Hasilnya tidak akan berubah, saat anda cek di console-log browser anda akan muncul error yang menyebutkan akses ke bagian Warning-bar diblok sebagai penerapan kebijakan keamanan cross-origin.

Blocked a frame with origin from accessing a cross-origin frame

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 #2

Dapatkan skrip semua materi di repository

Dukung donasi agar tutorial ini tetap operasional:
SiLiKiDi