Criar interfaces do usuário com o serviço HTML é semelhante ao desenvolvimento da Web padrão. No entanto, alguns aspectos são específicos do ambiente do Apps Script. Este guia destaca as práticas recomendadas para desenvolver interfaces responsivas e seguras do serviço HTML.
Separe HTML, CSS e JavaScript
Combinar todo o HTML, CSS e JavaScript em um único arquivo pode dificultar a manutenção dos projetos. Embora o Apps Script exija que o código do lado do cliente esteja em arquivos .html, ainda é recomendável separar o CSS e o JavaScript do lado do cliente em arquivos próprios e incluí-los na página HTML principal com uma função personalizada.
O exemplo a seguir usa uma função include do lado do servidor em Code.gs para
importar Stylesheet.html e JavaScript.html para Page.html. Quando chamada com
scriptlets de impressão,
essa função injeta o conteúdo do arquivo diretamente. Como são snippets HTML em vez de arquivos .css ou .js independentes, eles precisam incluir tags <style> e <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>Carregar dados de forma assíncrona, não em modelos
O HTML com modelo pode ser usado para criar interfaces 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>O que fazer: 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
No modo sandbox do IFRAME,
todos os arquivos JavaScript e CSS precisam ser veiculados por HTTPS. Servir esses arquivos
de forma insegura resulta em erros como estes:
Conteúdo misto: a página em "https://..." foi carregada por HTTPS, mas solicitou um script não seguro "http://...". Esta 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 ajuda 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, o que possibilita apresentar 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.