Tworzenie interfejsów użytkownika za pomocą usługi HTML jest podobne do standardowego tworzenia stron internetowych. Niektóre aspekty są jednak specyficzne dla środowiska Apps Script. W tym przewodniku znajdziesz sprawdzone metody tworzenia responsywnych i bezpiecznych interfejsów użytkownika za pomocą usługi HTML.
Oddzielenie kodu HTML, CSS i JavaScript
Łączenie całego kodu HTML, CSS i JavaScript w jednym pliku może utrudniać utrzymanie projektu. Chociaż Apps Script wymaga, aby kod po stronie klienta znajdował się w plikach .html, nadal warto oddzielić CSS i JavaScript po stronie klienta do osobnych plików i dołączyć je do głównej strony HTML za pomocą funkcji niestandardowej.
W tym przykładzie używamy funkcji include po stronie serwera w pliku Code.gs, aby zaimportować pliki Stylesheet.html i JavaScript.html do pliku Page.html. Gdy ta funkcja jest wywoływana za pomocą
skryptów drukowania,
wstawia bezpośrednio zawartość pliku. Ponieważ są to fragmenty kodu HTML
, a nie osobne pliki .css lub .js, muszą one zawierać <style>
i <script> tagi.
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>Asynchroniczne wczytywanie danych, a nie w szablonach
Szablony HTML można wykorzystać do szybkiego tworzenia interfejsów, ale ich użycie powinno być ograniczone, aby interfejs był responsywny. Kod w szablonach jest wykonywany tylko raz, gdy strona jest wczytywana, a żadna treść nie jest wysyłana do klienta, dopóki przetwarzanie nie zostanie zakończone. Długotrwałe zadania w kodzie skryptu mogą spowolnić działanie interfejsu.
Używaj tagów skryptów do szybkich, jednorazowych zadań, takich jak dołączanie innych treści lub ustawianie wartości statycznych. Wszystkie inne dane powinny być wczytywane za pomocą
google.script.run wywołań.
Kodowanie w ten asynchroniczny sposób jest trudniejsze, ale pozwala na szybsze wczytywanie interfejsu i wyświetlanie użytkownikowi spinnera lub innego komunikatu o wczytywaniu.
Nie – wczytywanie w szablonach
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Tak – wczytywanie asynchroniczne
<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>Wczytywanie zasobów za pomocą protokołu HTTPS
W trybie piaskownicy IFRAME ,
wszystkie pliki JavaScript i CSS muszą być udostępniane za pomocą protokołu HTTPS. Udostępnianie tych plików w sposób niezabezpieczony powoduje błędy takie jak ten:
Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure script 'http://...'. This request has been blocked; the content must be served over HTTPS.
Większość popularnych bibliotek obsługuje zarówno protokół HTTP, jak i HTTPS, więc przełączenie się na HTTPS zwykle wymaga tylko dodania litery „s” do adresu URL.
Używanie deklaracji typu dokumentu HTML5
Jeśli strona jest wyświetlana w nowszym IFRAME
trybie piaskownicy, upewnij się
że na początku pliku HTML znajduje się ten fragment kodu.
<!DOCTYPE html>
Ta deklaracja typu dokumentu informuje przeglądarkę, że strona została zaprojektowana dla nowoczesnych przeglądarek i nie powinna być renderowana w trybie osobliwości. Nawet jeśli nie planujesz korzystać z nowoczesnych elementów HTML5 ani interfejsów API JavaScript, pomaga to zapewnić prawidłowe wyświetlanie strony.
Wczytywanie JavaScriptu na końcu
Wielu programistów stron internetowych zaleca wczytywanie kodu JavaScript na dole strony, aby zwiększyć responsywność. Jest to jeszcze ważniejsze w przypadku usługi HTML. Przeniesienie tagów <script> na koniec strony pozwala na renderowanie treści HTML
przed przetworzeniem JavaScriptu, co umożliwia wyświetlenie użytkownikowi
spinnera lub innego komunikatu.
Korzystanie z biblioteki jQuery
jQuery to popularna biblioteka JavaScript, która upraszcza wiele typowych zadań związanych z tworzeniem stron internetowych.