Bu sayfa, Cloud Translation API ile çevrilmiştir.

HTML Hizmeti: En İyi Uygulamalar

HTML hizmetiyle kullanıcı arayüzleri oluştururken diğer web geliştirme türlerindeki kalıpların ve uygulamaların birçoğu benzerdir. Ancak, Apps Komut Dosyası ortamına özgü olan veya vurgulamaya değer bazı yönleri vardır. Kendi HTML hizmeti kullanıcı arayüzlerinizi geliştirirken aklınızda bulundurmanız gereken bazı en iyi uygulamaları aşağıda bulabilirsiniz.

Bu en iyi uygulamaları göstermek için Basit Görevler adlı HTML hizmetini kullanarak örnek bir web uygulaması oluşturduk. Tam kaynak kodunu ve kurulum talimatlarını GitHub depomuzda bulabilirsiniz.

Ayrı HTML, CSS ve JavaScript

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 ve istemci tarafı JavaScript'inizi farklı dosyalara ayırarak bunları ö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. Bu işlev, yazdırma komut dosyaları kullanılarak çağrıldığında, belirtilen dosya içeriğini geçerli dosyaya aktarır. Eklenen dosyaların <style> ve <script> etiketlerini içerdiğine dikkat edin. Bunlar, saf .css veya .js dosyaları değil, HTML snippet'leridir.

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

Şablon HTML, basit arayüzleri hızlı bir şekilde oluşturmak için kullanılabilir ancak kullanıcı arayüzünüzün duyarlı olmasını sağlamak 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 hiçbir içerik gönderilmez. Komut dosyası kodunuzda uzun süreli görevler, kullanıcı arayüzünüzün yavaş görünmesine neden olabilir.

Başka içerik ekleme veya statik değerler ayarlama gibi hızlı, tek seferlik görevler için komut dosyası etiketlerini kullanın. Diğer tüm veriler, google.script.run çağrıları kullanılarak yüklenmelidir. Bu eşzamansız şekilde kodlama daha zordur ancak kullanıcı arayüzünün daha hızlı yüklenmesini sağlar ve kullanıcıya döner simge veya başka bir yükleme mesajı sunma fırsatı verir.

Yapma: Şablonlarda yükleme

<p>List of things:</p>
<? var things = getLotsOfThings(); ?>
<ul>
  <? for (var i = 0; i < things.length; i++) { ?>
    <li><?= things[i] ?></li>
  <? } ?>
</ul>

Yapın: 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>

Basit Görevler örnek uygulamasında, Page.html HTML hizmeti sayfası verileri bu şekilde yükler ve sayfaya başka kaynak kodları eklemek için yalnızca şablon kullanır.

Kaynakları HTTPS kullanarak yükleme

Sayfanız, HTTPS kullanılarak sunulmayan JavaScript veya CSS dosyaları dahil olmak üzere IFRAME korumalı alan modu kullanılarak sunuluyorsa aşağıdakine benzer hatalara neden olur.

Karma İçerik: "https://..." adresindeki sayfa HTTPS üzerinden yüklendi, ancak "http://..." adlı güvenli olmayan bir komut dosyası istedi. Bu istek engellendi, içerik HTTPS üzerinden sunulmalıdır.

En popüler kitaplıklar hem HTTP'yi hem de HTTPS'yi destekler. Bu nedenle, geçiş genellikle URL'ye "s" harfi eklemekten ibarettir.

HTML5 belge türü bildirimini kullanma

Sayfanız daha yeni olan IFRAME korumalı alan modu kullanılarak sunuluyorsa HTML dosyanızın en üstüne aşağıdaki kod snippet'ini eklediğinizden emin olun.

<!DOCTYPE html>

Bu belge türü sapmaları, tarayıcıya sayfayı modern tarayıcılar için tasarladığınızı ve süslemeler modunu kullanarak oluşturmaması gerektiğini bildirir. Modern HTML5 öğelerinden veya JavaScript API'lerinden yararlanmayı planlamasanız bile, bu, sayfanızın doğru bir şekilde görüntülendiğinden emin olmanıza yardımcı olacaktır.

JavaScript'i en son yükle

Birçok web geliştiricisi, yanıt verme hızını artırmak için JavaScript kodunun sayfanın alt kısmına yüklenmesini önerir ve bu, HTML hizmeti için daha da önemlidir. <script> etiketlerinizi sayfanızın sonuna taşımak, HTML içeriğinin JavaScript işlenmeden önce oluşturulmasını sağlar. Böylece kullanıcıya bir döner veya başka bir mesaj sunabilirsiniz.

jQuery'den yararlanın

jQuery, web geliştirmedeki yaygın birçok görevi basitleştiren popüler bir JavaScript kitaplığıdır.