Menyisipkan Library Javascript Eksternal Di Apps Script

Dalam kebutuhan tertentu terkadang kita memerlukan library javascript dari sumber eksternal di luar Apps Script. Mengimpor javascript eksternal dapat dilakukan dengan dua cara di Apps Script.

JAVASCRIPT EKSTERNAL

Sekalipun Apps Script berbasis javascript tetapi tidak semua core tersedia dalam Apps Script. Google memfilter beberapa metode bawaan core javascript yang punya potensi berbahaya dari segi keamanan. Inilah yang menjadi alasan mengapa beberapa metode core javascript tidak dikenal oleh Apps Script.

Faktor lainnya mengapa kita membutuhkan javascript eksternal terkadang library javascript dari sumber eksternal lebih baik fungsionalitasnya dari core Apps Script SiLiKiDi

Apps Script pada dasarnya dijalankan di sisi server [Server-side] tetapi mengakomodasi pula untuk kebutuhan interaksi dengan browser di sisi pengguna [Client-side] karena core javascript pada awalnya dibuat sebagai platform browser bukan server.

Apps Script dan Node JS merupakan contoh pengembangan baru javascript untuk platform Server-side SiLiKiDi

Dengan demikian anda harus menentukan di sisi mana javascript eksternal tersebut akan ditempatkan saat diimpor nantinya:

• Client-side: menggunakan HTML Service untuk menempatkan library javascript eksternal di sisi browser.
• Server-side: menggunakan metode eval untuk menempatkan library javascript eksternal di sisi pengolahan server.

CLIENT-SIDE

Tidak akan dibahas mendalam di sini, anda bisa mencoba bereksperimen langsung dengan contoh implementasi mengimpor jQuery ke dalam Apps Script dari sisi Client-side pada materi HTML Service: Best Practices.

Saat anda berurusan dengan Client-side perlu diperhatikan batasan-batasan keamanan yang diterapkan browser maupun Web Apps SiLiKiDi

• Protokol HTTPS: pastikan scripting di browser client-side berkomunikasi dengan server-side Web Apps melalui jalur HTTPS yang sudah menjadi standar wajib. Anda akan menemui warning hingga pemblokiran mixed content bila mengabaikannya.
• Blokir Cross-Origin: yaitu penggunaan sumber daya lintas situs, scripting anda harus mampu meyakinkan bisa dipercaya oleh situs lain yang anda gunakan sumber dayanya, bila mengabaikannya scripting anda akan menghadapi blokir cross-origin ini.
• Selengkapnya tentang batasan-batasan yang diterapkan dalam client-side Apps Script bisa anda simak dalam artikel HTML Service: Restrictions

Dua teknik yang bisa anda gunakan untuk mengakali batasan berkomunikasi antara client-server tersebut dapat anda adopsi dari trik Amit Agarwal dan Client-side API SiLiKiDi

SERVER-SIDE

Apps Script memungkinkan untuk saling berbagi penggunaan lintas Apps Script [reuseable script]. Jika javascript eksternal yang dimaksud menyediakan versi Apps Script, maka anda dapat menyisipkannya dalam pilihan cara:

Libraries

Menggunakan Libraries berarti satu sumber script digunakan bersama-sama sehingga dapat menghemat penyimpanan dan tanpa perlu kita menulis ulang script sumber tersebut. Keuntungan lainnya script dapat langsung terintegrasi dengan project anda.

Tentunya dengan konsekuensi:

• Setiap kali ada perubahan di sumber akan berdampak langsung pada script yang menggunakannya.
• Tidak bisa memodifikasi untuk keperluan spesifik
• Dalam kondisi dan penggunaan tertentu diberlakukan penguncian untuk menghindari tabrakan penggunaan oleh user yang berbeda di saat yang bersamaan. Selain itu diberlakukan pula Resource scoping dari script yang digunakan bersama.

Setiap library Apps Script memiliki Script ID unik. Anda cukup memanggil Script ID tersebut untuk menambahkan ke dalam Libraries project anda:

• Klik menu Libraries
• Tempelkan Script ID dari Apps Script berbagi
• Klik tombol Look up
• Pilih versi terbaru dan klik tombol Save

Duplikasi File Script

Selain dengan Script ID terkadang sebuah script berbagi langsung kontennya yang biasanya berbentuk sebuah tautan:

• Buka tautan dari Apps Script sumber
• Pilih menu Overview atau klik pada icon i
• Klik icon Make a copy

Konsekuensi dengan cara ini perlu usaha tambahan untuk mengintegrasikan dengan project script anda karena cara ini menghasilkan file Apps Script terpisah secara mandiri.

Keuntungan dengan cara ini kita bisa memodifikasi konten dari script sesuai dengan kebutuhan kita SiLiKiDi

Copy Paste

Jika script sumber tidak menyediakan berbagi melalui Apps Script, dengan terpaksa anda harus Copy-Paste secara manual. Dapat berupa modul tambahan dalam project anda atau file Apps Script tersendiri.

Ujicoba Dengan LodashGS

Anda dapat bereksperimen ketiga cara tersebut dengan mencoba mengimpor LodashGS untuk platform Apps Script:

• Script ID: 1SQ0PlSMwndIuOAgtVJdjxsuXueECtY9OGejVDS37ckSVbMll73EXf2PW
• URL Share
• Copy Paste

Jelajahi lebih banyak Apps Script berbagi di sini SiLiKiDi

LIBRARY JAVASCRIPT NON APPS SCRIPT

Pro Kontra eval()

eval() telah membagi dua kubu di penggemar javascript. Alasan utamanya karena eval() berpotensi untuk penyusupan script manipulator dari pihak yang tidak bertanggung jawab seperti dalam kasus XSS Cross-site scripting

Alasan lainnya eval() dikenal sangat lambat karena untuk memprosesnya membutuhkan banyak resource. Di sisi lain teknologi javascript terbaru mengutamakan kecepatan dan efisiensi.

Terlepas dari pro kontranya, masih ada kegunaan dari eval() khususnya dalam hot reloading script tanpa perlu mengulang kompilasi dari awal.

Anda dapat menyimak lebih lanjut perdebatan penggunaan eval() di Stackoverflow SiLiKiDi

Mengimpor dengan eval()

Apps Script tidak menyediakan secara khusus untuk mengimpor sumber javascript dari luar platformnya. Trik untuk mengakalinya dengan melibatkan eval().

Contoh penerapan dalam Apps Script dapat mengadopsi trik Amit Agarwal mengimpor beberapa library javascript eksternal sekaligus:

/***********************************************************************************
* IMPOR LIBRARY JAVASCRIPT EKSTERNAL * 
* Credit:
* Amit Agarwal: https://www.labnol.org/code/20380-load-external-javascript-with-eval
************************************************************************************/

/***** FUNGSI IMPOR JAVASCRIPT EKSTERNAL *****/
const loadJSFromUrl = ( url ) => {
  return eval( UrlFetchApp.fetch(url).getContentText() );
}

/***** DAFTAR URL LIBRARY JAVASCRIPT EKSTERNAL *****/
const LIBRARIES = {
  seedrandomJS: "https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js",
  alea: "https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/lib/alea.min.js",
};

/***** KONVERSI DARI STRING MENJADI OBJEK FUNGSI DENGAN EVAL() *****/
Object.keys( LIBRARIES ).forEach( function ( library ) {
  newFunc = loadJSFromUrl( LIBRARIES[library] );
  eval( "let " + library + " = " + newFunc );
});

/*******************************************************************
* NOTASI DI APPS SCRIPT TERGANTUNG LIBRARY JAVASCRIPT BERSANGKUTAN * 
* Contoh: seedrandom.js https://github.com/davidbau/seedrandom
********************************************************************/
let randomResult = new Math.seedrandom();
Logger.log( randomResult() ); 

Demi keamanan scripting anda pastikan javascript eksternal dari sumber terpercaya dan dalam versi Stable Release SiLiKiDi

ALTERNATIF SELAIN EVAL()

Developer Mozilla memberikan solusi lebih baik pengganti eval() dengan memanfaatkan objek Function. Sehingga impor dengan eval() di atas dapat kita konversi menjadi:

const alternativeToEval = () => {
  let jsURL = "https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js";
  let jsFetch = UrlFetchApp.fetch( jsURL ).getContentText();
  return Function( jsFetch )();
}

const testAlternativeToEval = () => {
  altToEval();
  let seed = Math.seedrandom();
  let angka = new Math.seedrandom( seed, { entropy: true } );
  Logger.log( "Seed Random: " + angka() );
}

WORST-CASE SCENARIO

Apps Script tidak sepenuhnya memboyong core javascript, beberapa tidak disertakan dengan pertimbangan keamanan di Apps Script. Dengan demikian anda harus menterjemahkan ulang notasi-notasi core javascript yang tidak didukung Apps Script.

Seperti fitur javascript dengan Web Crypto API. Anda tidak akan bisa menerapkannya di dalam Apps Script SiLiKiDi

Bila beruntung anda bisa menemukan padanannya yang disediakan Apps Script dengan Class Utilities.

Dapatkan skrip semua materi di repository

Dukung donasi agar tutorial ini tetap operasional:
SiLiKiDi