HTML পরিষেবার মাধ্যমে ইউজার ইন্টারফেস তৈরি করা অন্যান্য ধরণের ওয়েব ডেভেলপমেন্টের মতো একই ধরণের অনেক পদ্ধতি এবং অনুশীলন অনুসরণ করে। তবে, কিছু দিক রয়েছে যা অ্যাপস স্ক্রিপ্ট পরিবেশের জন্য অনন্য বা অন্যথায় হাইলাইট করার যোগ্য। নীচে আমরা কিছু সেরা অনুশীলনগুলি কভার করব যা আপনার নিজস্ব HTML-পরিষেবা UI তৈরি করার সময় মনে রাখা উচিত।
HTML, CSS এবং JavaScript আলাদা করুন
সমস্ত HTML, CSS এবং JavaScript কোড এক ফাইলে রাখলে আপনার প্রোজেক্ট পড়া এবং ডেভেলপ করা কঠিন হয়ে পড়তে পারে। যদিও Apps Script-এর জন্য ক্লায়েন্ট-সাইড কোড .html ফাইলে স্থাপন করা প্রয়োজন, তবুও আপনি আপনার CSS এবং ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্টকে বিভিন্ন ফাইলে আলাদা করতে পারেন এবং তারপর একটি কাস্টম ফাংশন ব্যবহার করে মূল HTML পৃষ্ঠায় অন্তর্ভুক্ত করতে পারেন।
নিচের উদাহরণটি Code.gs ফাইলে একটি কাস্টম সার্ভার-সাইড include() ফাংশন সংজ্ঞায়িত করে যা Stylesheet.html এবং JavaScript.html ফাইলের কন্টেন্ট Page.html ফাইলে ইমপোর্ট করে। যখন printing scriptlets ব্যবহার করে কল করা হয়, তখন এই ফাংশনটি নির্দিষ্ট ফাইলের কন্টেন্ট বর্তমান ফাইলে ইমপোর্ট করে। লক্ষ্য করুন যে অন্তর্ভুক্ত ফাইলগুলিতে <style> এবং <script> ট্যাগ রয়েছে কারণ এগুলি HTML স্নিপেট এবং বিশুদ্ধ .css বা .js ফাইল নয়।
কোড.জিএস
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 স্যান্ডবক্স মোড ব্যবহার করে পরিবেশন করা হয়, তাহলে HTTPS ব্যবহার করে পরিবেশন না করা JavaScript বা CSS ফাইল সহ, নীচের ত্রুটির মতো ত্রুটি দেখা দেবে।
মিশ্র কন্টেন্ট: 'https://...' পৃষ্ঠাটি HTTPS এর মাধ্যমে লোড করা হয়েছিল, কিন্তু একটি অনিরাপদ স্ক্রিপ্ট 'http://...' অনুরোধ করা হয়েছে। এই অনুরোধটি ব্লক করা হয়েছে; কন্টেন্টটি HTTPS এর মাধ্যমে পরিবেশন করা আবশ্যক।
বেশিরভাগ জনপ্রিয় লাইব্রেরি HTTP এবং HTTPS উভয়ই সমর্থন করে, তাই স্যুইচিং সাধারণত URL-এ একটি যোগ 's' সন্নিবেশ করার ব্যাপার।
HTML5 ডকুমেন্ট টাইপ ডিক্লারেশন ব্যবহার করুন
যদি আপনার পৃষ্ঠাটি নতুন IFRAME স্যান্ডবক্স মোড ব্যবহার করে পরিবেশিত হয়, তাহলে আপনার HTML ফাইলের উপরে নিম্নলিখিত কোডের স্নিপেটটি অন্তর্ভুক্ত করতে ভুলবেন না।
<!DOCTYPE html>
এই ডকুমেন্ট টাইপ ডিক্লেশন ব্রাউজারকে বলে যে আপনি আধুনিক ব্রাউজারগুলির জন্য পৃষ্ঠাটি ডিজাইন করেছেন এবং এটি আপনার পৃষ্ঠাটিকে quirks মোড ব্যবহার করে রেন্ডার করা উচিত নয়। এমনকি যদি আপনি আধুনিক HTML5 উপাদান বা জাভাস্ক্রিপ্ট API ব্যবহার করার পরিকল্পনা নাও করেন, তবে এটি আপনার পৃষ্ঠাটি সঠিকভাবে প্রদর্শিত হচ্ছে তা নিশ্চিত করতে সহায়তা করবে।
শেষবার জাভাস্ক্রিপ্ট লোড করুন
অনেক ওয়েব ডেভেলপার প্রতিক্রিয়াশীলতা বাড়ানোর জন্য পৃষ্ঠার নীচে জাভাস্ক্রিপ্ট কোড লোড করার পরামর্শ দেন এবং HTML পরিষেবার ক্ষেত্রে এটি আরও গুরুত্বপূর্ণ। আপনার পৃষ্ঠার শেষে আপনার <script> ট্যাগগুলি সরানোর ফলে জাভাস্ক্রিপ্ট প্রক্রিয়া করার আগে HTML কন্টেন্ট রেন্ডার হতে পারবে, যার ফলে আপনি ব্যবহারকারীর কাছে একটি স্পিনার বা অন্য কোনও বার্তা উপস্থাপন করতে পারবেন।
jQuery এর সুবিধা নিন
jQuery হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা ওয়েব ডেভেলপমেন্টের অনেক সাধারণ কাজকে সহজ করে তোলে।