Việc tạo giao diện người dùng bằng dịch vụ HTML tương tự như hoạt động phát triển web tiêu chuẩn. Tuy nhiên, một số khía cạnh chỉ dành riêng cho môi trường Apps Script. Hướng dẫn này nêu bật các phương pháp hay nhất để phát triển giao diện người dùng dịch vụ HTML thích ứng và an toàn.
Tách HTML, CSS và JavaScript
Việc kết hợp tất cả HTML, CSS và JavaScript vào một tệp duy nhất có thể khiến các dự án khó duy trì. Mặc dù Apps Script yêu cầu mã phía máy khách phải nằm trong các tệp .html, nhưng bạn vẫn nên tách CSS và JavaScript phía máy khách thành các tệp riêng và đưa chúng vào trang HTML chính bằng một hàm tuỳ chỉnh.
Ví dụ sau đây sử dụng hàm include phía máy chủ trong Code.gs để nhập Stylesheet.html và JavaScript.html vào Page.html. Khi được gọi bằng các tập lệnh in, hàm này sẽ chèn trực tiếp nội dung tệp. Vì đây là các đoạn mã HTML chứ không phải tệp .css hoặc .js độc lập, nên chúng phải có thẻ <style> và <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>Tải dữ liệu không đồng bộ, không tải trong các mẫu
Bạn có thể sử dụng HTML dựa trên mẫu để nhanh chóng tạo giao diện, nhưng bạn nên hạn chế sử dụng để đảm bảo giao diện người dùng của bạn có khả năng phản hồi. Mã trong các mẫu được thực thi một lần khi trang được tải và không có nội dung nào được gửi đến máy khách cho đến khi quá trình xử lý hoàn tất. Việc có các tác vụ chạy trong thời gian dài trong mã scriptlet có thể khiến giao diện người dùng của bạn xuất hiện chậm.
Sử dụng thẻ scriptlet cho các tác vụ nhanh, một lần, chẳng hạn như bao gồm nội dung khác hoặc đặt giá trị tĩnh. Tất cả dữ liệu khác phải được tải bằng các lệnh gọi google.script.run.
Việc lập trình theo cách không đồng bộ này sẽ khó khăn hơn nhưng cho phép giao diện người dùng tải nhanh hơn và có cơ hội trình bày một chỉ báo xoay hoặc thông báo tải khác cho người dùng.
Không – tải trong mẫu
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Nên – tải không đồng bộ
<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>Tải tài nguyên bằng HTTPS
Trong IFRAME chế độ hộp cát, tất cả các tệp JavaScript và CSS phải được phân phát qua HTTPS. Việc phân phát các tệp này một cách không an toàn sẽ dẫn đến các lỗi như sau:
Nội dung hỗn hợp: Trang tại "https://..." được tải qua HTTPS, nhưng đã yêu cầu một tập lệnh không an toàn "http://...". Yêu cầu này đã bị chặn; nội dung phải được phân phát qua HTTPS.
Hầu hết các thư viện phổ biến đều hỗ trợ cả HTTP và HTTPS, vì vậy, việc chuyển đổi thường chỉ là vấn đề chèn thêm "s" vào URL.
Sử dụng khai báo loại tài liệu HTML5
Nếu trang của bạn được phân phát bằng chế độ hộp cát IFRAME mới hơn, hãy nhớ thêm đoạn mã sau vào đầu tệp HTML.
<!DOCTYPE html>
Khai báo loại tài liệu này cho trình duyệt biết rằng bạn đã thiết kế trang cho các trình duyệt hiện đại và trình duyệt không được kết xuất trang của bạn bằng chế độ tương thích ngược. Ngay cả khi bạn không có ý định tận dụng các phần tử HTML5 hiện đại hoặc API JavaScript, việc này sẽ giúp đảm bảo trang của bạn hiển thị đúng cách.
Tải JavaScript sau cùng
Nhiều nhà phát triển web đề xuất tải mã JavaScript ở cuối trang để tăng khả năng phản hồi. Điều này thậm chí còn quan trọng hơn đối với dịch vụ HTML. Việc di chuyển thẻ <script> đến cuối trang cho phép nội dung HTML kết xuất trước khi JavaScript được xử lý, nhờ đó bạn có thể trình bày một biểu tượng xoay hoặc thông báo khác cho người dùng.
Tận dụng jQuery
jQuery là một thư viện JavaScript phổ biến giúp đơn giản hoá nhiều tác vụ phổ biến trong quá trình phát triển web.