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