HTML পরিষেবার মাধ্যমে ব্যবহারকারী ইন্টারফেস তৈরি করা স্ট্যান্ডার্ড ওয়েব ডেভেলপমেন্টের মতোই। তবে, কিছু দিক অ্যাপস স্ক্রিপ্ট পরিবেশের সাথে নির্দিষ্ট। এই নির্দেশিকাটি প্রতিক্রিয়াশীল এবং সুরক্ষিত HTML-পরিষেবা UI তৈরির জন্য সর্বোত্তম অনুশীলনগুলি তুলে ধরে।
HTML, CSS এবং JavaScript আলাদা করুন
সমস্ত HTML, CSS এবং JavaScript একটি ফাইলে একত্রিত করলে প্রকল্পগুলি রক্ষণাবেক্ষণ করা কঠিন হয়ে পড়তে পারে। যদিও Apps Script-এর জন্য .html ফাইলে ক্লায়েন্ট-সাইড কোড থাকা প্রয়োজন, তবুও আপনার CSS এবং ক্লায়েন্ট-সাইড JavaScript-কে তাদের নিজস্ব ফাইলে আলাদা করা উচিত এবং একটি কাস্টম ফাংশন সহ মূল HTML পৃষ্ঠায় অন্তর্ভুক্ত করা উচিত।
নিচের উদাহরণে Code.gs এ একটি সার্ভার-সাইড include ফাংশন ব্যবহার করা হয়েছে যাতে Stylesheet.html এবং JavaScript.html কে Page.html এ ইম্পোর্ট করা যায়। যখন scriptlets প্রিন্ট করার মাধ্যমে কল করা হয়, তখন এই ফাংশনটি সরাসরি ফাইলের কন্টেন্ট ইনজেক্ট করে। যেহেতু এগুলি স্বতন্ত্র .css বা .js ফাইলের পরিবর্তে HTML স্নিপেট, তাই এগুলিতে অবশ্যই <style> এবং <script> ট্যাগ অন্তর্ভুক্ত করতে হবে।
কোড.জিএস
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}পৃষ্ঠা.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>স্টাইলশিট.এইচটিএমএল
<style>
p {
color: green;
}
</style>জাভাস্ক্রিপ্ট.html
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>টেমপ্লেটগুলিতে নয়, অ্যাসিঙ্ক্রোনাসভাবে ডেটা লোড করুন
টেমপ্লেট করা HTML দ্রুত ইন্টারফেস তৈরি করতে ব্যবহার করা যেতে পারে, তবে আপনার UI রেসপন্সিভ নিশ্চিত করার জন্য এর ব্যবহার সীমিত করা উচিত। পৃষ্ঠাটি লোড হওয়ার পরে টেমপ্লেটের কোডটি একবার কার্যকর করা হয় এবং প্রক্রিয়াকরণ সম্পূর্ণ না হওয়া পর্যন্ত ক্লায়েন্টকে কোনও সামগ্রী পাঠানো হয় না। আপনার স্ক্রিপ্টলেট কোডে দীর্ঘ সময় ধরে কাজ করার ফলে আপনার UI ধীর দেখাতে পারে।
দ্রুত, এককালীন কাজের জন্য স্ক্রিপ্টলেট ট্যাগ ব্যবহার করুন, যেমন অন্যান্য কন্টেন্ট অন্তর্ভুক্ত করা বা স্ট্যাটিক মান সেট করা। অন্যান্য সমস্ত ডেটা google.script.run কল ব্যবহার করে লোড করা উচিত। এই অ্যাসিঙ্ক্রোনাস পদ্ধতিতে কোডিং করা আরও কঠিন তবে UI কে আরও দ্রুত লোড করতে দেয় এবং এটি ব্যবহারকারীর কাছে একটি স্পিনার বা অন্যান্য লোডিং বার্তা উপস্থাপন করার সুযোগ দেয়।
করবেন না — টেমপ্লেট লোড করুন
<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>HTTPS ব্যবহার করে রিসোর্স লোড করুন
IFRAME স্যান্ডবক্স মোডে , সমস্ত জাভাস্ক্রিপ্ট এবং CSS ফাইল HTTPS এর মাধ্যমে পরিবেশন করতে হবে। এই ফাইলগুলি অনিরাপদভাবে পরিবেশন করলে নিম্নলিখিত ত্রুটি দেখা দেয়:
মিশ্র কন্টেন্ট: 'https://...' পৃষ্ঠাটি HTTPS এর মাধ্যমে লোড করা হয়েছিল, কিন্তু একটি অনিরাপদ স্ক্রিপ্ট 'http://...' অনুরোধ করা হয়েছে। এই অনুরোধটি ব্লক করা হয়েছে; কন্টেন্টটি HTTPS এর মাধ্যমে পরিবেশন করা আবশ্যক।
বেশিরভাগ জনপ্রিয় লাইব্রেরি HTTP এবং HTTPS উভয়ই সমর্থন করে, তাই স্যুইচিং সাধারণত URL-এ একটি যোগ 's' সন্নিবেশ করার ব্যাপার।
HTML5 ডকুমেন্ট টাইপ ডিক্লারেশন ব্যবহার করুন
যদি আপনার পৃষ্ঠাটি নতুন IFRAME স্যান্ডবক্স মোড ব্যবহার করে পরিবেশিত হয়, তাহলে আপনার HTML ফাইলের উপরে নিম্নলিখিত কোডের স্নিপেটটি অন্তর্ভুক্ত করতে ভুলবেন না।
<!DOCTYPE html>
এই ডকুমেন্ট টাইপ ডিক্লারেশন ব্রাউজারকে বলে যে আপনি আধুনিক ব্রাউজারগুলির জন্য পৃষ্ঠাটি ডিজাইন করেছেন এবং এটি আপনার পৃষ্ঠাটিকে quirks mode ব্যবহার করে রেন্ডার করা উচিত নয়। এমনকি যদি আপনি আধুনিক HTML5 উপাদান বা JavaScript API ব্যবহার করার পরিকল্পনা নাও করেন, তবে এটি আপনার পৃষ্ঠাটি সঠিকভাবে প্রদর্শিত হচ্ছে তা নিশ্চিত করতে সহায়তা করে।
শেষবার জাভাস্ক্রিপ্ট লোড করুন
অনেক ওয়েব ডেভেলপার প্রতিক্রিয়াশীলতা বাড়ানোর জন্য পৃষ্ঠার নীচে জাভাস্ক্রিপ্ট কোড লোড করার পরামর্শ দেন এবং HTML পরিষেবার ক্ষেত্রে এটি আরও গুরুত্বপূর্ণ। আপনার পৃষ্ঠার শেষে আপনার <script> ট্যাগগুলি সরানোর ফলে জাভাস্ক্রিপ্ট প্রক্রিয়া করার আগে HTML কন্টেন্ট রেন্ডার হতে পারে, যার ফলে আপনি ব্যবহারকারীর কাছে একটি স্পিনার বা অন্য কোনও বার্তা উপস্থাপন করতে পারবেন।
jQuery এর সুবিধা নিন
jQuery হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা ওয়েব ডেভেলপমেন্টের অনেক সাধারণ কাজকে সহজ করে তোলে।