La creación de interfaces de usuario con el servicio HTML sigue muchos de los mismos patrones y prácticas que otros tipos de desarrollo web. Sin embargo, hay algunos aspectos que son exclusivos del entorno de Apps Script o que vale la pena destacar. A continuación, se abordan algunas de las prácticas recomendadas que debes tener en cuenta cuando desarrolles tus propias IU de servicio HTML.
Para ayudar a demostrar estas prácticas recomendadas, creamos una aplicación web de muestra mediante el servicio HTML llamado Tareas simples. El código fuente completo y las instrucciones de configuración están disponibles en nuestro repositorio de GitHub.
HTML, CSS y JavaScript independientes
Mantener todo el código HTML, CSS y JavaScript en un solo archivo puede dificultar la lectura y el desarrollo de tu proyecto. Si bien Apps Script requiere que el código del cliente se coloque en archivos .html, puedes separar los archivos CSS y JavaScript del cliente en diferentes archivos y, luego, incluirlos en la página HTML principal con una función personalizada.
En el siguiente ejemplo, se define una función include() personalizada del servidor en el archivo Code.gs para importar el contenido de los archivos Stylesheet.html y JavaScript.html al archivo Page.html. Cuando se la llama mediante secuencias de comandos de impresión, esta función importa el contenido del archivo especificado en el archivo actual. Ten en cuenta que los archivos incluidos contienen etiquetas <style> y <script> porque son fragmentos HTML y no archivos .css o .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>
Carga datos de forma asíncrona, no en plantillas
El HTML de plantillas se puede usar para compilar interfaces simples con rapidez, pero debe limitarse a fin de garantizar que la IU sea responsiva. El código en las plantillas se ejecuta una vez que se carga la página y no se envía contenido al cliente hasta que se completa el procesamiento. Tener tareas de larga duración en el código del scriptlet puede hacer que la IU parezca lenta.
Usa etiquetas de scriptlet para tareas rápidas y únicas, como incluir otro contenido o establecer valores estáticos. Todos los demás datos deben cargarse mediante llamadas a google.script.run.
Programar de esta manera asíncrona es más difícil, pero permite que la IU se cargue más rápido y le da la oportunidad de presentar un ícono giratorio u otro mensaje de carga al usuario.
Lo que no debes: cargar en plantillas.
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>
Sí: Se cargan de forma así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>
En la aplicación de muestra de Simple Tasks, la página de servicio HTML Page.html carga los datos de esta manera y solo usa las plantillas para incluir otro código fuente en la página.
Carga recursos con HTTPS
Si tu página se publica con el modo de zona de pruebas IFRAME más reciente, incluidos los archivos JavaScript o CSS que no se entregan mediante HTTPS, se generarán errores como el que se muestra a continuación.
Contenido mixto: La página que se encuentra en "https://..." se cargó en HTTPS, pero solicitó una secuencia de comandos insegura "http://...". Se bloqueó esta solicitud. El contenido debe entregarse mediante HTTPS.
Las bibliotecas más populares admiten HTTP y HTTPS, por lo que, por lo general, para cambiar, solo se debe insertar una adición "en la URL".
Usa la declaración de tipo de documento HTML5
Si tu página se publica con el modo de zona de pruebas IFRAME más reciente, asegúrate de incluir el siguiente fragmento de código en la parte superior de tu archivo HTML.
<!DOCTYPE html>
En estas declaciones de tipo de documento, se indica al navegador que diseñaste la página para navegadores modernos y que no debe renderizarla con el modo no estándar. Incluso si no planeas aprovechar los elementos HTML5 modernos o las APIs de JavaScript, esto ayudará a garantizar que tu página se muestre correctamente.
Cargar JavaScript en último lugar
Muchos desarrolladores web recomiendan cargar código JavaScript en la parte inferior de la página para aumentar la capacidad de respuesta, lo que es aún más importante con el servicio HTML. Si mueves las etiquetas <script> al final de la página, el contenido HTML se podrá renderizar antes de que se procese el código JavaScript, lo que te permitirá mostrar un ícono giratorio o algún otro mensaje al usuario.
Aprovecha jQuery
jQuery es una biblioteca de JavaScript popular que simplifica muchas tareas comunes en el desarrollo web.