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

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

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

इन सबसे सही तरीकों को दिखाने के लिए, हमने एचटीएमएल सेवा का इस्तेमाल करके सिंपल टास्क नाम का एक सैंपल वेब ऐप्लिकेशन बनाया है. पूरा सोर्स कोड और सेटअप करने के निर्देश, GitHub के डेटा स्टोर करने की जगह में उपलब्ध हैं.

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

'सिंपल टास्क' सैंपल ऐप्लिकेशन में, एचटीएमएल-सेवा पेज Page.html इस तरह डेटा लोड करता है. साथ ही, पेज में सिर्फ़ दूसरे सोर्स कोड को शामिल करने के लिए टेंप्लेट का इस्तेमाल करता है.

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

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

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

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

HTML5 दस्तावेज़ टाइप के एलान का इस्तेमाल करें

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

<!DOCTYPE html>

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

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

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

jQuery का लाभ उठाएं

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