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, alguns aspectos são exclusivos do ambiente do Apps Script ou que vale a pena destacar. Veja abaixo algumas práticas recomendadas que você precisa ter em mente ao desenvolver IUs de serviço HTML.
Para ajudar a demonstrar essas práticas recomendadas, criamos um app da Web de exemplo usando o serviço HTML chamado Tarefas simples. O código-fonte completo e as instruções de configuração estão disponíveis no nosso repositório do GitHub (em inglês).
HTML, CSS e JavaScript separados
Manter todo o código HTML, CSS e JavaScript em um único arquivo pode dificultar a leitura e o desenvolvimento do seu 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 scripts de impressão, essa função importa o conteúdo do arquivo especificado para o arquivo atual. Observe
que os arquivos incluídos contêm tags <style> e <script> porque
são snippets HTML, e 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 modelo pode ser usado para criar rapidamente interfaces simples, mas seu uso deve ser limitado para garantir que a IU seja responsiva. O código nos modelos é executado uma vez no carregamento da página, e nenhum conteúdo é enviado ao cliente até que o processamento seja concluído. Ter tarefas de longa duração no código scriptlet pode fazer com que a IU pareça lenta.
Use tags scriptlet para tarefas rápidas e únicas, como incluir outro conteúdo
ou definir valores estáticos. Todos os outros dados precisam ser carregados usando
chamadas google.script.run.
A programação dessa maneira assíncrona é mais difícil, mas permite que a IU seja carregada
mais rapidamente e oferece a oportunidade de apresentar um ícone de carregamento ou outra
mensagem de carregamento ao usuário.
O que não fazer: carregar modelos
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>
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>
No aplicativo de exemplo Simple Tasks, a página de serviço HTML Page.html carrega dados dessa maneira e só usa modelos para incluir outro código-fonte na página.
Carregar recursos usando HTTPS
Se a página for veiculada usando o modo sandbox IFRAME mais recente, incluir arquivos JavaScript ou CSS não exibidos usando HTTPS resultará em erros como o mostrado abaixo.
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 exibido por HTTPS.
As bibliotecas mais conhecidas oferecem suporte a HTTP e HTTPS. Portanto, a mudança geralmente é apenas uma questão de inserir um "s" de adição 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 seguinte snippet de código na parte de cima do arquivo HTML.
<!DOCTYPE html>
As recusas desse tipo de documento informam ao navegador que você projetou a página para navegadores modernos e que ele não pode renderizar sua página usando o modo quirks. Mesmo que você não pretenda 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 inferior da página
para aumentar a capacidade de resposta, e isso é ainda mais importante no serviço
HTML. Ao mover as tags <script> para o final da página, o conteúdo HTML
vai ser renderizado antes que o JavaScript seja processado. Assim, você pode apresentar um
ícone de carregamento ou outra mensagem ao usuário.
Aproveitar o jQuery
A jQuery é uma biblioteca JavaScript popular que simplifica muitas tarefas comuns no desenvolvimento da Web.