Membangun antarmuka pengguna dengan layanan HTML mirip dengan pengembangan web standar. Namun, aspek tertentu khusus untuk lingkungan Apps Script. Panduan ini menguraikan praktik terbaik untuk mengembangkan UI layanan HTML yang responsif dan aman.
HTML, CSS, dan JavaScript terpisah
Menggabungkan semua HTML, CSS, dan JavaScript ke dalam satu file dapat membuat project sulit dikelola. Meskipun Apps Script mengharuskan kode sisi klien berada dalam file .html, Anda tetap harus memisahkan CSS dan JavaScript sisi klien ke dalam file masing-masing dan menyertakannya di halaman HTML utama dengan fungsi kustom.
Contoh berikut menggunakan fungsi include sisi server di Code.gs untuk
mengimpor Stylesheet.html dan JavaScript.html ke Page.html. Jika dipanggil dengan
scriptlet pencetakan,
fungsi ini akan menyuntikkan konten file secara langsung. Karena ini adalah cuplikan HTML, bukan file .css atau .js mandiri, cuplikan ini harus menyertakan tag <style> dan <script>.
Code.gs
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
<h1>Welcome</h1>
<p>Please enjoy this helpful script.</p>
<?!= include('JavaScript'); ?>
</body>
</html>Stylesheet.html
<style>
p {
color: green;
}
</style>JavaScript.html
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>Memuat data secara asinkron, bukan dalam template
HTML yang Dibuat dengan Template dapat digunakan untuk membuat antarmuka dengan cepat, tetapi penggunaannya harus dibatasi untuk memastikan UI Anda responsif. Kode dalam template dijalankan sekali saat halaman dimuat, dan tidak ada konten yang dikirim ke klien hingga pemrosesan selesai. Memiliki tugas yang berjalan lama dalam kode cuplikan dapat menyebabkan UI Anda tampak lambat.
Gunakan tag scriptlet untuk tugas cepat satu kali seperti menyertakan konten lain
atau menetapkan nilai statis. Semua data lainnya harus dimuat menggunakan panggilan
google.script.run.
Pengodean secara asinkron ini lebih sulit, tetapi memungkinkan UI dimuat lebih cepat dan memberikan kesempatan untuk menampilkan spinner atau pesan pemuatan lainnya kepada pengguna.
Jangan — memuat template
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Do — memuat secara asinkron
<p>List of things:</p>
<ul id="things">
<li>Loading...</li>
</ul>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// The code in this function runs when the page is loaded.
$(function() {
google.script.run.withSuccessHandler(showThings)
.getLotsOfThings();
});
function showThings(things) {
var list = $('#things');
list.empty();
for (var i = 0; i < things.length; i++) {
list.append('<li>' + things[i] + '</li>');
}
}
</script>Memuat resource menggunakan HTTPS
Dalam IFRAME mode sandbox,
semua file JavaScript dan CSS harus ditayangkan melalui HTTPS. Menayangkan file ini secara tidak aman akan menyebabkan error seperti berikut:
Konten Campuran: Halaman di 'https://...' dimuat melalui HTTPS, tetapi meminta skrip yang tidak aman 'http://...'. Permintaan ini telah diblokir; konten harus ditayangkan melalui HTTPS.
Sebagian besar library populer mendukung HTTP dan HTTPS, sehingga peralihan biasanya hanya memerlukan penyisipan 's' tambahan ke dalam URL.
Menggunakan deklarasi jenis dokumen HTML5
Jika halaman Anda ditayangkan menggunakan IFRAME
mode sandbox yang lebih baru, pastikan
untuk menyertakan cuplikan kode berikut di bagian atas file HTML Anda.
<!DOCTYPE html>
Deklarasi jenis dokumen ini memberi tahu browser bahwa Anda mendesain halaman untuk browser modern, dan browser tidak boleh merender halaman Anda menggunakan quirks mode. Meskipun Anda tidak berencana memanfaatkan elemen HTML5 modern atau API JavaScript, hal ini membantu memastikan halaman Anda ditampilkan dengan benar.
Memuat JavaScript terakhir
Banyak developer web merekomendasikan pemuatan kode JavaScript di bagian bawah halaman untuk meningkatkan responsivitas, dan hal ini menjadi lebih penting dengan layanan HTML. Memindahkan tag <script> ke bagian akhir halaman memungkinkan konten HTML dirender sebelum JavaScript diproses, sehingga Anda dapat menampilkan spinner atau pesan lain kepada pengguna.
Memanfaatkan jQuery
jQuery adalah library JavaScript populer yang menyederhanakan banyak tugas umum dalam pengembangan web.