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