HTML hizmetiyle kullanıcı arayüzü oluşturma, diğer web geliştirme türleriyle aynı kalıpların ve uygulamaların çoğunu kullanır. Ancak Apps Script ortamına özgü veya başka bir şekilde vurgulanmaya değer bazı yönler vardır. Aşağıda, kendi HTML hizmeti kullanıcı arayüzlerinizi geliştirirken göz önünde bulundurmanız gereken bazı en iyi uygulamaları ele alacağız.
HTML, CSS ve JavaScript'i ayırın
Tüm HTML, CSS ve JavaScript kodunu tek bir dosyada tutmak projenizin okunmasını ve geliştirilmesini zorlaştırabilir. Apps Komut Dosyası, istemci tarafı kodunun .html dosyalarına yerleştirilmesini gerektirse de CSS'nizi ve istemci tarafı JavaScript'inizi farklı dosyalara ayırıp özel bir işlevle ana HTML sayfasına ekleyebilirsiniz.
Aşağıdaki örnekte, Stylesheet.html ve JavaScript.html dosya içeriğini Page.html dosyasına aktarmak için Code.gs dosyasında özel bir sunucu tarafı include() işlevi tanımlanmaktadır. Yazdırma komut dosyaları kullanılarak çağrıldığında bu işlev, belirtilen dosya içeriğini geçerli dosyaya aktarır. Dahil edilen dosyaların, HTML snippet'leri olduğu ve saf .css veya .js dosyaları olmadığı için <style> ve <script> etiketlerini içerdiğini unutmayın.
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>Verileri şablonlarda değil, eşzamansız olarak yükleyin.
Şablonlu HTML, basit arayüzleri hızlı bir şekilde oluşturmak için kullanılabilir ancak kullanıcı arayüzünüzün duyarlı olması için kullanımı sınırlandırılmalıdır. Şablonlardaki kod, sayfa yüklendiğinde bir kez yürütülür ve işleme tamamlanana kadar istemciye içerik gönderilmez. Küçük komut dosyası kodunuzda uzun süren görevler olması, kullanıcı arayüzünüzün yavaş görünmesine neden olabilir.
Diğer içerikleri ekleme veya statik değerleri ayarlama gibi hızlı ve tek seferlik görevler için scriptlet etiketlerini kullanın. Diğer tüm veriler google.script.run çağrıları kullanılarak yüklenmelidir.
Bu şekildeki asenkron kodlama daha zordur ancak kullanıcı arayüzünün daha hızlı yüklenmesini sağlar ve kullanıcıya bir yükleme animasyonu veya başka bir yükleme mesajı gösterme fırsatı verir.
Yapmayın: Şablonlara yükleme yapmayın.
<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
<? for (var i = 0; i < things.length; i++) { ?>
<li><?= things[i] ?></li>
<? } ?>
</ul>Yapılacaklar: Eşzamansız olarak yükleyin.
<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>Kaynakları HTTPS kullanarak yükleme
Sayfanız daha yeni IFRAME
sandbox modu kullanılarak sunuluyorsa HTTPS kullanılarak sunulmayan JavaScript veya CSS dosyalarının eklenmesi, aşağıdakine benzer hatalara neden olur.
Karma İçerik: "https://..." adresindeki sayfa HTTPS üzerinden yüklendi ancak "http://..." adresindeki güvenli olmayan bir komut dosyası istendi. Bu istek engellendi; içerik HTTPS üzerinden sunulmalıdır.
En popüler kitaplıkların çoğu hem HTTP hem de HTTPS'yi desteklediğinden geçiş genellikle URL'ye ek bir "s" eklemekten ibarettir.
HTML5 belge türü bildirimini kullanın
Sayfanız daha yeni olan IFRAME
sandbox modu kullanılarak yayınlanıyorsa HTML dosyanızın en üstüne aşağıdaki kod snippet'ini eklediğinizden emin olun.
<!DOCTYPE html>
Bu belge türü bildirimi, tarayıcıya sayfayı modern tarayıcılar için tasarladığınızı ve sayfanızı Quirks modu kullanılarak oluşturmaması gerektiğini bildirir. Modern HTML5 öğelerinden veya JavaScript API'lerinden yararlanmayı planlamıyor olsanız bile bu, sayfanızın doğru şekilde görüntülenmesini sağlar.
JavaScript'i en son yükleme
Birçok web geliştirici, yanıt verme hızını artırmak için JavaScript kodunun sayfanın en altında yüklenmesini önerir. Bu durum, HTML hizmetiyle daha da önemlidir. <script> etiketlerinizi sayfanızın sonuna taşıdığınızda, HTML içeriğinin JavaScript işlenmeden önce oluşturulmasına olanak tanırsınız. Böylece kullanıcıya bir yükleme simgesi veya başka bir mesaj gösterebilirsiniz.
jQuery'den yararlanma
jQuery, web geliştirmede birçok yaygın görevi basitleştiren popüler bir JavaScript kitaplığıdır.