La creazione di interfacce utente con il servizio HTML segue molti degli stessi pattern e delle stesse pratiche di altri tipi di sviluppo web. Tuttavia, ci sono alcuni aspetti specifici dell'ambiente Apps Script o che vale la pena sottolineare. Di seguito illustreremo alcune best practice da tenere presenti durante lo sviluppo delle interfacce utente per i servizi HTML.
Per dimostrare queste best practice, abbiamo creato un'app web di esempio utilizzando il servizio HTML chiamato Attività semplici. Il codice sorgente completo e le istruzioni di configurazione sono disponibili nel nostro repository GitHub.
Separa HTML, CSS e JavaScript
Conservare tutto il codice HTML, CSS e JavaScript in un unico file può rendere il tuo progetto difficile da leggere e sviluppare. Sebbene Apps Script richieda l'inserimento del codice lato client nei file .html, puoi comunque separare il codice CSS e il codice JavaScript lato client in diversi file e quindi includerli nella pagina HTML principale con una funzione personalizzata.
L'esempio seguente definisce una funzione include() lato server personalizzata nel file Code.gs per importare i contenuti dei file Stylesheet.html e JavaScript.html nel file Page.html. Quando viene chiamata utilizzando
scriptlet di stampa,
questa funzione importa il contenuto del file specificato nel file corrente. Tieni presente che i file inclusi contengono tag <style> e <script> perché sono snippet HTML e non file .css o .js puri.
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>
Carica i dati in modo asincrono, non nei modelli
L'HTML basato su modelli può essere utilizzato per creare rapidamente interfacce semplici, ma il suo utilizzo deve essere limitato per garantire che la tua UI sia reattiva. Il codice nei modelli viene eseguito una volta al caricamento della pagina e nessun contenuto viene inviato al client fino al completamento dell'elaborazione. La presenza di attività a lunga esecuzione nel codice scriptlet può causare un rallentamento dell'interfaccia utente.
Utilizza i tag scriptlet per attività rapide una tantum come includere altri contenuti o impostare valori statici. Tutti gli altri dati devono essere caricati utilizzando le chiamate
google.script.run.
La programmazione in modo asincrono è più difficile, ma consente un caricamento più rapido dell'interfaccia utente e l'opportunità di presentare all'utente uno strumento di rotazione o un altro messaggio di caricamento.
Non: carica nei modelli
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>
Sì: carica in modo asincrono
<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>
Nell'applicazione di esempio Simple Tasks, la pagina del servizio HTML Page.html carica i dati in questo modo e utilizza i modelli solo per includere altro codice sorgente nella pagina.
Carica le risorse tramite HTTPS
Se la pagina viene pubblicata con la IFRAME
modalità sandbox più recente, inclusi i file JavaScript o CSS non pubblicati utilizzando HTTPS, potrebbero verificarsi errori simili a quello mostrato di seguito.
Contenuto misto: la pagina all'indirizzo "https://..." è stata caricata tramite HTTPS, ma ha richiesto uno script non sicuro "http://...". Questa richiesta è stata bloccata. I contenuti devono essere pubblicati tramite HTTPS.
Le librerie più diffuse supportano sia HTTP che HTTPS, quindi il passaggio di solito è solo una questione di inserimento di una "s" aggiuntiva nell'URL.
Utilizza la dichiarazione del tipo di documento HTML5
Se la pagina viene pubblicata utilizzando la IFRAME
modalità sandbox più recente, assicurati di includere il seguente snippet di codice nella parte superiore del file HTML.
<!DOCTYPE html>
Le deduzioni del tipo di documento indicano al browser che hai progettato la pagina per i browser moderni e che non dovrebbe eseguire il rendering della pagina utilizzando la modalità non standard. Anche se non hai intenzione di sfruttare gli elementi HTML5 o le API JavaScript moderni, questo contribuirà ad assicurare che la tua pagina venga visualizzata correttamente.
Carica JavaScript l'ultimo
Molti sviluppatori web consigliano di caricare il codice JavaScript in fondo alla pagina per aumentare la reattività, un aspetto ancora più importante nel servizio HTML. Se sposti i tag <script> alla fine della pagina, il contenuto HTML viene visualizzato prima dell'elaborazione di JavaScript, in modo da presentare all'utente uno strumento di rotazione o un altro messaggio.
Sfruttare jQuery
jQuery è una popolare libreria JavaScript che semplifica molte attività comuni dello sviluppo web.