Halaman ini diterjemahkan oleh Cloud Translation API.

Layanan HTML: Praktik Terbaik

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 yang perlu disoroti. Di bawah ini kami 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 untuk 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. Jika dipanggil menggunakan printing scriptlet, fungsi ini akan mengimpor konten file yang ditentukan ke 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 dengan template dapat digunakan untuk mem-build antarmuka sederhana dengan cepat, tetapi penggunaannya harus dibatasi untuk memastikan UI Anda responsif. Kode dalam template dijalankan satu kali saat halaman dimuat, dan tidak ada konten yang dikirim ke klien hingga pemrosesan selesai. Memiliki tugas yang berjalan lama dalam kode skriplet dapat menyebabkan UI Anda tampak lambat.

Gunakan tag skriplet untuk tugas satu kali singkat seperti menyertakan konten lainnya atau menyetel nilai statis. Semua data lainnya harus dimuat menggunakan panggilan google.script.run. Coding dengan cara asinkron ini lebih sulit, tetapi memungkinkan UI dimuat lebih cepat dan memberikan kesempatan untuk menampilkan indikator lingkaran berputar 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>

Lakukan — muat 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 mode sandbox IFRAME yang lebih baru, termasuk file JavaScript atau CSS yang tidak ditayangkan menggunakan HTTPS, akan terjadi error seperti yang ada di bawah ini.

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 beralih biasanya hanya memerlukan penyisipan 's' tambahan ke dalam URL.

Menggunakan deklarasi jenis dokumen HTML5

Jika halaman Anda ditayangkan menggunakan mode sandbox IFRAME yang lebih baru, pastikan untuk menyertakan cuplikan kode berikut di bagian atas file HTML.

<!DOCTYPE html>

Deklarasi jenis dokumen ini memberi tahu browser bahwa Anda mendesain halaman untuk browser modern, dan bahwa browser tidak boleh merender halaman menggunakan quirks mode. Meskipun Anda tidak berencana menggunakan elemen HTML5 modern atau JavaScript API, hal ini akan membantu memastikan halaman Anda ditampilkan dengan benar.

Memuat JavaScript terakhir

Banyak developer web merekomendasikan untuk memuat kode JavaScript di bagian bawah halaman untuk meningkatkan responsivitas, dan hal ini bahkan lebih penting dengan layanan HTML. Memindahkan tag <script> ke bagian akhir halaman akan memungkinkan konten HTML dirender sebelum JavaScript diproses, sehingga Anda dapat menampilkan spinner atau pesan lainnya kepada pengguna.

Memanfaatkan jQuery

jQuery adalah library JavaScript populer yang menyederhanakan banyak tugas umum dalam pengembangan web.