एचटीएमएल सेवा का इस्तेमाल करके यूज़र इंटरफ़ेस बनाना, स्टैंडर्ड वेब डेवलपमेंट जैसा ही होता है. हालांकि, कुछ पहलू Apps Script एनवायरमेंट के लिए खास होते हैं. इस गाइड में, रिस्पॉन्सिव और सुरक्षित एचटीएमएल-सेवा वाले यूज़र इंटरफ़ेस (यूआई) डेवलप करने के सबसे सही तरीकों के बारे में बताया गया है.
एचटीएमएल, सीएसएस, और JavaScript को अलग-अलग करना
सभी एचटीएमएल, सीएसएस, और JavaScript को एक ही फ़ाइल में शामिल करने से, प्रोजेक्ट को मैनेज करना मुश्किल हो सकता है. Apps Script के लिए, क्लाइंट-साइड कोड को .html फ़ाइलों में रखना ज़रूरी है. हालांकि, आपको सीएसएस और क्लाइंट-साइड JavaScript को अलग-अलग फ़ाइलों में रखना चाहिए. साथ ही, उन्हें कस्टम फ़ंक्शन की मदद से मुख्य एचटीएमएल पेज में शामिल करना चाहिए.
इस उदाहरण में, Code.gs में सर्वर-साइड include फ़ंक्शन का इस्तेमाल किया गया है. इसका मकसद, Page.html में Stylesheet.html और JavaScript.html को इंपोर्ट करना है. प्रिंटिंग स्क्रिप्टलेट के साथ कॉल करने पर, यह फ़ंक्शन फ़ाइल के कॉन्टेंट को सीधे तौर पर इंजेक्ट करता है. ये स्टैंडअलोन .css या .js फ़ाइलों के बजाय एचटीएमएल स्निपेट हैं. इसलिए, इनमें <style> और <script> टैग शामिल होने चाहिए.
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' जोड़ना होता है.
एचटीएमएल5 दस्तावेज़ टाइप के बारे में जानकारी देने वाले निर्देश का इस्तेमाल करना
अगर आपका पेज, नए IFRAME
सैंडबॉक्स मोड का इस्तेमाल करके दिखाया जाता है, तो पक्का करें कि आपने अपनी एचटीएमएल फ़ाइल के सबसे ऊपर, कोड का यह स्निपेट शामिल किया हो.
<!DOCTYPE html>
इस दस्तावेज़ टाइप की जानकारी से ब्राउज़र को पता चलता है कि आपने पेज को नए ब्राउज़र के लिए डिज़ाइन किया है. साथ ही, इसे क्वर्क्स मोड का इस्तेमाल करके आपके पेज को रेंडर नहीं करना चाहिए. अगर आपको मॉडर्न एचटीएमएल5 एलिमेंट या JavaScript API का इस्तेमाल नहीं करना है, तो भी यह तरीका अपनाएं. इससे यह पक्का करने में मदद मिलती है कि आपका पेज सही तरीके से दिखे.
JavaScript को सबसे आखिर में लोड करें
कई वेब डेवलपर, पेज के सबसे नीचे JavaScript कोड लोड करने का सुझाव देते हैं, ताकि पेज तेज़ी से लोड हो. एचटीएमएल सेवा के लिए, यह और भी ज़रूरी है. अपने पेज के आखिर में <script> टैग जोड़ने से, JavaScript प्रोसेस होने से पहले एचटीएमएल कॉन्टेंट रेंडर हो जाता है. इससे आपको उपयोगकर्ता को स्पिनर या कोई दूसरा मैसेज दिखाने का मौका मिलता है.
jQuery का फ़ायदा लेना
jQuery एक लोकप्रिय JavaScript लाइब्रेरी है. यह वेब डेवलपमेंट में कई सामान्य कामों को आसान बनाती है.