এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

HTML পরিষেবা: HTML তৈরি করুন এবং পরিবেশন করুন

HTML পরিষেবা আপনাকে ওয়েব পৃষ্ঠাগুলি পরিবেশন করতে দেয় যা সার্ভার-সাইড অ্যাপস স্ক্রিপ্ট ফাংশনগুলির সাথে ইন্টারঅ্যাক্ট করতে পারে৷ এটি বিশেষভাবে ওয়েব অ্যাপ তৈরি করতে বা Google ডক্স, পত্রক এবং ফর্মগুলিতে কাস্টম ব্যবহারকারী ইন্টারফেস যোগ করার জন্য উপযোগী। এমনকি আপনি এটি একটি ইমেলের মূল অংশ তৈরি করতে ব্যবহার করতে পারেন।

HTML ফাইল তৈরি করুন

আপনার Apps স্ক্রিপ্ট প্রকল্পে একটি HTML ফাইল যোগ করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

অ্যাপস স্ক্রিপ্ট এডিটর খুলুন।
বাম দিকে, একটি ফাইল করুন > HTML এ ক্লিক করুন।

HTML ফাইলের মধ্যে, আপনি বেশিরভাগ স্ট্যান্ডার্ড HTML, CSS এবং ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট লিখতে পারেন। পৃষ্ঠাটিকে HTML5 হিসাবে পরিবেশন করা হবে, যদিও HTML5-এর কিছু উন্নত বৈশিষ্ট্য উপলব্ধ নয়, যেমন বিধিনিষেধে ব্যাখ্যা করা হয়েছে।

আপনার ফাইলটিতে টেমপ্লেট স্ক্রিপ্টলেটগুলিও অন্তর্ভুক্ত থাকতে পারে যা ব্যবহারকারীর কাছে পৃষ্ঠাটি পাঠানোর আগে সার্ভারে প্রক্রিয়া করা হয় — PHP-এর মতো — যেমন টেমপ্লেটেড HTML- এর বিভাগে ব্যাখ্যা করা হয়েছে।

একটি ওয়েব অ্যাপ হিসাবে HTML পরিবেশন করুন

HTML পরিষেবার সাথে একটি ওয়েব অ্যাপ তৈরি করতে, আপনার কোডে অবশ্যই একটি doGet() ফাংশন অন্তর্ভুক্ত করতে হবে যা স্ক্রিপ্টকে কীভাবে পৃষ্ঠাটি পরিবেশন করতে হয় তা বলে৷ ফাংশনটি অবশ্যই একটি HtmlOutput অবজেক্ট প্রদান করবে, যেমন এই উদাহরণে দেখানো হয়েছে।

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

একবার সেই মৌলিক কাঠামোটি ঠিক হয়ে গেলে, আপনাকে যা করতে হবে তা হল আপনার স্ক্রিপ্টের একটি সংস্করণ সংরক্ষণ করুন , তারপর আপনার স্ক্রিপ্টটিকে একটি ওয়েব অ্যাপ হিসাবে স্থাপন করুন ৷

স্ক্রিপ্টটি একটি ওয়েব অ্যাপ হিসাবে স্থাপন করার পরে, আপনি এটিকে একটি Google সাইটে এম্বেড করতে পারেন৷

একটি Google ডক্স, পত্রক, স্লাইড বা ফর্ম ব্যবহারকারী ইন্টারফেস হিসাবে HTML পরিবেশন করুন৷

আপনার স্ক্রিপ্ট ফাইলের সাথে কন্টেইনার-বাউন্ড হলে HTML পরিষেবা Google ডক্স, শীট, স্লাইড বা ফর্মগুলিতে একটি ডায়ালগ বা সাইডবার প্রদর্শন করতে পারে। (Google Forms-এ, কাস্টম ইউজার ইন্টারফেসগুলি শুধুমাত্র একজন সম্পাদকের কাছে দৃশ্যমান হয় যিনি ফর্মটি সংশোধন করার জন্য খোলেন, এমন কোনও ব্যবহারকারীর কাছে নয় যিনি ফর্মটি খোলেন প্রতিক্রিয়া জানাতে৷)

একটি ওয়েব অ্যাপের বিপরীতে, একটি স্ক্রিপ্ট যা একটি নথি, স্প্রেডশীট বা ফর্মের জন্য একটি ইউজার ইন্টারফেস তৈরি করে তার জন্য বিশেষভাবে একটি doGet() ফাংশনের প্রয়োজন হয় না এবং আপনাকে আপনার স্ক্রিপ্টের একটি সংস্করণ সংরক্ষণ বা এটি স্থাপন করার প্রয়োজন নেই৷ পরিবর্তে, যে ফাংশনটি ইউজার ইন্টারফেস খোলে তা অবশ্যই সক্রিয় নথি, ফর্ম বা স্প্রেডশীটের জন্য Ui অবজেক্টের showModalDialog()) বা showSidebar() পদ্ধতিতে একটি HtmlOutput অবজেক্ট হিসাবে আপনার HTML ফাইল পাস করতে হবে।

এই উদাহরণগুলিতে সুবিধার জন্য কয়েকটি অতিরিক্ত বৈশিষ্ট্য রয়েছে: onOpen() ফাংশন একটি কাস্টম মেনু তৈরি করে যা ইন্টারফেসটি খুলতে সহজ করে, এবং HTML ফাইলের বোতামটি google.script.host API-এর একটি বিশেষ close() পদ্ধতি চালু করে। ইন্টারফেস বন্ধ করতে।

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

মনে রাখবেন যে আপনি যখন প্রথমবার এই ইউজার ইন্টারফেসটি প্রদর্শন করতে চান, আপনাকে অবশ্যই স্ক্রিপ্ট এডিটরে ম্যানুয়ালি onOpen() ফাংশন চালাতে হবে অথবা ডক্স, শীট বা ফর্ম এডিটরের জন্য উইন্ডোটি পুনরায় লোড করতে হবে (যা স্ক্রিপ্ট সম্পাদক বন্ধ করবে)। এর পরে, আপনি যখন ফাইলটি খুলবেন তখন কাস্টম মেনুটি কয়েক সেকেন্ডের মধ্যে উপস্থিত হওয়া উচিত। ইন্টারফেস দেখতে ডায়ালগ > খুলুন নির্বাচন করুন।

HTML ফাইল তৈরি করুন

অ্যাপস স্ক্রিপ্ট এডিটর খুলুন।
বাম দিকে, একটি ফাইল করুন > HTML এ ক্লিক করুন।

একটি ওয়েব অ্যাপ হিসাবে HTML পরিবেশন করুন

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

একটি Google ডক্স, পত্রক, স্লাইড বা ফর্ম ব্যবহারকারী ইন্টারফেস হিসাবে HTML পরিবেশন করুন৷

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

HTML ফাইল তৈরি করুন

অ্যাপস স্ক্রিপ্ট এডিটর খুলুন।
বাম দিকে, একটি ফাইল করুন > HTML এ ক্লিক করুন।

একটি ওয়েব অ্যাপ হিসাবে HTML পরিবেশন করুন

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

একটি Google ডক্স, পত্রক, স্লাইড বা ফর্ম ব্যবহারকারী ইন্টারফেস হিসাবে HTML পরিবেশন করুন৷

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>