A criação de 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.
Separar 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 cliente esteja em arquivos .html, ainda é recomendável separar o CSS e o JavaScript 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 esses são snippets HTML
em vez de arquivos .css ou .js independentes, eles precisam incluir <style>
e <script> tags.
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 precisa 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 de 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
google.script.run chamadas.
A codificação dessa maneira assíncrona é mais difícil, mas permite que a interface seja carregada mais rapidamente e oferece a oportunidade de apresentar um indicador de carregamento ou outra mensagem ao usuário.
Não faça isso: 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 isso: carregar 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 de sandbox IFRAME ,
todos os arquivos JavaScript e CSS precisam ser veiculados por HTTPS. A veiculação desses arquivos de forma não segura resulta em erros como este:
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 conhecidas oferece suporte a 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 IFRAME
sandbox 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 a página seja exibida corretamente.
Carregar 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, e 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
indicador de carregamento ou outra mensagem ao usuário.
Aproveitar o jQuery
jQuery é uma biblioteca JavaScript conhecida que simplifica muitas tarefas comuns no desenvolvimento da Web.