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

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

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

एचटीएमएल, सीएसएस, और 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>

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

JavaScript को आखिरी बार लोड करें

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

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

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