Membuat antarmuka pengguna dengan layanan HTML mengikuti banyak pola dan praktik yang sama seperti jenis pengembangan web lainnya. Namun, ada beberapa aspek yang unik untuk lingkungan Apps Script atau patut disoroti. Di bawah ini, kita akan membahas beberapa praktik terbaik yang harus Anda ingat saat mengembangkan UI layanan HTML Anda sendiri.
Memisahkan HTML, CSS, dan JavaScript
Menyimpan semua kode HTML, CSS, dan JavaScript dalam satu file dapat membuat project Anda sulit dibaca dan dikembangkan. Meskipun Apps Script memerlukan kode sisi klien untuk ditempatkan dalam file .html, Anda tetap dapat memisahkan CSS dan JavaScript sisi klien ke dalam file yang berbeda, lalu menyertakannya di halaman HTML utama dengan fungsi kustom.
Contoh di bawah menentukan fungsi include() sisi server kustom dalam file Code.gs untuk mengimpor konten file Stylesheet.html dan JavaScript.html ke dalam file Page.html. Saat dipanggil menggunakan
scriptlet pencetakan,
fungsi ini mengimpor konten file yang ditentukan ke dalam file saat ini. Perhatikan bahwa file yang disertakan berisi tag <style> dan <script> karena merupakan cuplikan HTML, bukan file .css atau .js murni.
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 sederhana 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 skrip 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
Jika halaman Anda ditayangkan menggunakan IFRAME
mode sandbox yang lebih baru, termasuk
file JavaScript atau CSS yang tidak ditayangkan menggunakan HTTPS akan menyebabkan error seperti
yang ada di bawah.
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 akan 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 akhir halaman akan 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.