इस पेज का अनुवाद Cloud Translation API से किया गया है.

एचटीएमएल सेवा: सबसे सही तरीके

एचटीएमएल सेवा का इस्तेमाल करके यूज़र इंटरफ़ेस बनाने के लिए, वेब डेवलपमेंट के अन्य तरीकों की तरह ही कई पैटर्न और तरीकों का इस्तेमाल किया जाता है. हालांकि, कुछ पहलू ऐसे हैं जो Apps Script एनवायरमेंट के लिए खास हैं या जिनके बारे में बताना ज़रूरी है. यहां हम कुछ ऐसे सबसे सही तरीकों के बारे में बताएंगे जिनका इस्तेमाल करके, आपको एचटीएमएल-सेवा वाले यूज़र इंटरफ़ेस (यूआई) बनाने चाहिए.

एचटीएमएल, सीएसएस, और JavaScript को अलग-अलग करें

सभी एचटीएमएल, सीएसएस, और JavaScript कोड को एक ही फ़ाइल में रखने से, आपके प्रोजेक्ट को पढ़ना और डेवलप करना मुश्किल हो सकता है. Apps Script में, क्लाइंट-साइड कोड को .html फ़ाइलों में रखना ज़रूरी होता है. हालांकि, सीएसएस और क्लाइंट-साइड JavaScript को अलग-अलग फ़ाइलों में रखा जा सकता है. इसके बाद, कस्टम फ़ंक्शन की मदद से उन्हें मुख्य एचटीएमएल पेज में शामिल किया जा सकता है.

यहां दिए गए उदाहरण में, Code.gs फ़ाइल में कस्टम सर्वर-साइड include() फ़ंक्शन के बारे में बताया गया है. इसका इस्तेमाल, Stylesheet.html और JavaScript.html फ़ाइल के कॉन्टेंट को Page.html फ़ाइल में इंपोर्ट करने के लिए किया जाता है. प्रिंटिंग स्क्रिप्टलेट का इस्तेमाल करके कॉल किए जाने पर, यह फ़ंक्शन तय की गई फ़ाइल के कॉन्टेंट को मौजूदा फ़ाइल में इंपोर्ट करता है. ध्यान दें कि शामिल की गई फ़ाइलों में <style> और <script> टैग शामिल हैं. ऐसा इसलिए है, क्योंकि ये एचटीएमएल स्निपेट हैं और पूरी तरह से .css या .js फ़ाइलें नहीं हैं.

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>

डेटा को एसिंक्रोनस तरीके से लोड करें, टेंप्लेट में नहीं

टेंप्लेट वाले एचटीएमएल का इस्तेमाल करके, आसानी से इंटरफ़ेस बनाए जा सकते हैं. हालांकि, इसका इस्तेमाल सीमित तौर पर करना चाहिए, ताकि आपका यूज़र इंटरफ़ेस (यूआई) रिस्पॉन्सिव हो. पेज लोड होने पर, टेंप्लेट में मौजूद कोड एक बार एक्ज़ीक्यूट होता है. साथ ही, प्रोसेसिंग पूरी होने तक क्लाइंट को कोई कॉन्टेंट नहीं भेजा जाता. स्क्रिप्टलेट कोड में लंबे समय तक चलने वाले टास्क होने से, यूज़र इंटरफ़ेस (यूआई) धीरे-धीरे लोड होता है.

स्क्रिप्टलेट टैग का इस्तेमाल, एक बार में पूरे होने वाले कामों के लिए करें. जैसे, अन्य कॉन्टेंट शामिल करना या स्टैटिक वैल्यू सेट करना. अन्य सभी डेटा को google.script.run कॉल का इस्तेमाल करके लोड किया जाना चाहिए. इस तरह से एसिंक्रोनस कोडिंग करना ज़्यादा मुश्किल होता है. हालांकि, इससे यूज़र इंटरफ़ेस (यूआई) ज़्यादा तेज़ी से लोड होता है. साथ ही, यूज़र इंटरफ़ेस (यूआई) को उपयोगकर्ता को स्पिनर या लोड होने से जुड़ा कोई अन्य मैसेज दिखाने का मौका मिलता है.

नहीं — टेंप्लेट में लोड न करें

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

करें — एसिंक्रोनस तरीके से लोड करें

<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>

एचटीटीपीएस का इस्तेमाल करके संसाधन लोड करना

अगर आपका पेज नए IFRAME सैंडबॉक्स मोड का इस्तेमाल करके दिखाया जाता है, तो एचटीटीपीएस का इस्तेमाल करके नहीं दिखाई गई JavaScript या सीएसएस फ़ाइलों को शामिल करने पर, नीचे दी गई गड़बड़ी जैसी गड़बड़ियां होंगी.

मिक्स कॉन्टेंट: 'https://...' पर मौजूद पेज, एचटीटीपीएस पर लोड हुआ, लेकिन उसने एक असुरक्षित स्क्रिप्ट 'http://...' का अनुरोध किया. इस अनुरोध को ब्लॉक कर दिया गया है, क्योंकि कॉन्टेंट को एचटीटीपीएस पर दिखाना ज़रूरी है.

ज़्यादातर लोकप्रिय लाइब्रेरी, एचटीटीपी और एचटीटीपीएस, दोनों के साथ काम करती हैं. इसलिए, स्विच करने के लिए आम तौर पर यूआरएल में सिर्फ़ एक 's' जोड़ना होता है.

HTML5 दस्तावेज़ टाइप के बारे में जानकारी देने वाले निर्देश का इस्तेमाल करना

अगर आपका पेज, नए IFRAME सैंडबॉक्स मोड का इस्तेमाल करके दिखाया जाता है, तो पक्का करें कि आपने एचटीएमएल फ़ाइल में सबसे ऊपर, कोड का यह स्निपेट शामिल किया हो.

<!DOCTYPE html>

इस तरह के दस्तावेज़ के टाइप के बारे में जानकारी देने वाले टैग से ब्राउज़र को पता चलता है कि आपने पेज को आधुनिक ब्राउज़र के लिए डिज़ाइन किया है. साथ ही, इससे ब्राउज़र को यह भी पता चलता है कि उसे आपके पेज को क्वर्क्स मोड का इस्तेमाल करके रेंडर नहीं करना चाहिए. अगर आपको मॉडर्न एचटीएमएल5 एलिमेंट या JavaScript API का फ़ायदा नहीं लेना है, तो भी इससे यह पक्का करने में मदद मिलेगी कि आपका पेज सही तरीके से दिखे.

JavaScript को सबसे आखिर में लोड करें

कई वेब डेवलपर, पेज के सबसे नीचे JavaScript कोड लोड करने का सुझाव देते हैं, ताकि पेज तेज़ी से लोड हो. एचटीएमएल सेवा के लिए यह और भी ज़रूरी है. अपने पेज के आखिर में <script> टैग जोड़ने से, JavaScript प्रोसेस होने से पहले एचटीएमएल कॉन्टेंट रेंडर हो जाएगा. इससे आपको उपयोगकर्ता को स्पिनर या कोई दूसरा मैसेज दिखाने का विकल्प मिलेगा.

jQuery का फ़ायदा लेना

jQuery एक लोकप्रिय JavaScript लाइब्रेरी है. यह वेब डेवलपमेंट में कई सामान्य कामों को आसान बनाती है.