A criação de interfaces de usuário com o serviço HTML segue muitos dos mesmos padrões e práticas de outros tipos de desenvolvimento da Web. No entanto, há alguns aspectos que são exclusivos do ambiente do Apps Script ou que valem a pena destacar. A seguir, vamos abordar algumas práticas recomendadas que você precisa ter em mente ao desenvolver suas próprias interfaces do serviço HTML.
Separe HTML, CSS e JavaScript
Manter todo o código HTML, CSS e JavaScript em um arquivo pode dificultar a leitura e o desenvolvimento do projeto. Embora o Apps Script exija que o código do lado do cliente seja colocado em arquivos .html, ainda é possível separar o CSS e o JavaScript do lado do cliente em arquivos diferentes e incluí-los na página HTML principal com uma função personalizada.
O exemplo abaixo define uma função include() personalizada do lado do servidor no arquivo
Code.gs para importar o conteúdo dos arquivos Stylesheet.html e JavaScript.html
para o arquivo Page.html. Quando chamada usando
scriptlets de impressão,
essa função importa o conteúdo do arquivo especificado para o arquivo atual. Os arquivos incluídos contêm tags <style> e <script> porque são snippets HTML, não arquivos .css ou .js puros.
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>Carregar dados de forma assíncrona, não em modelos
O HTML com modelo pode ser usado para criar interfaces simples rapidamente, mas o uso dele deve ser limitado para garantir que a interface seja responsiva. O código nos modelos é executado uma vez quando a página é carregada, e nenhum conteúdo é enviado ao cliente até que o processamento seja concluído. Ter tarefas de longa duração no código do scriptlet pode fazer com que a interface pareça lenta.
Use tags scriptlet para tarefas rápidas e únicas, como incluir outros conteúdos
ou definir valores estáticos. Todos os outros dados precisam ser carregados usando chamadas google.script.run.
Programar de forma assíncrona é mais difícil, mas permite que a interface carregue
mais rapidamente e apresente um spinner ou outra
mensagem de carregamento ao usuário.
Não — carregar em modelos
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Faça: carregue de forma assíncrona
<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>Carregar recursos usando HTTPS
Se a página for veiculada usando o modo sandbox IFRAME mais recente, incluir arquivos JavaScript ou CSS não veiculados usando HTTPS vai resultar em erros como o abaixo.
Conteúdo misto: a página em "https://..." foi carregada por HTTPS, mas solicitou um script não seguro "http://...". Essa solicitação foi bloqueada. O conteúdo precisa ser veiculado por HTTPS.
A maioria das bibliotecas mais usadas é compatível com HTTP e HTTPS. Portanto, a troca geralmente é apenas uma questão de inserir um "s" adicional no URL.
Usar a declaração de tipo de documento HTML5
Se a página for veiculada usando o modo sandbox IFRAME mais recente, inclua o snippet de código a seguir na parte de cima do arquivo HTML.
<!DOCTYPE html>
Essa declaração de tipo de documento informa ao navegador que você projetou a página para navegadores modernos e que ela não deve ser renderizada usando o modo quirks. Mesmo que você não planeje aproveitar os elementos HTML5 modernos ou as APIs JavaScript, isso vai ajudar a garantir que sua página seja exibida corretamente.
Carregar o JavaScript por último
Muitos desenvolvedores da Web recomendam carregar o código JavaScript na parte de baixo da página
para aumentar a capacidade de resposta. Isso é ainda mais importante com o serviço
HTML. Mover as tags <script> para o final da página permite que o conteúdo HTML
seja renderizado antes do processamento do JavaScript, permitindo que você apresente um
spinner ou outra mensagem ao usuário.
Aproveite o jQuery
jQuery é uma biblioteca JavaScript conhecida que simplifica muitas tarefas comuns no desenvolvimento da Web.