سرویس HTML: ایجاد و سرویس HTML

سرویس HTML به شما امکان می‌دهد صفحات وبی را ارائه دهید که می‌توانند با توابع اسکریپت برنامه‌های سمت سرور تعامل داشته باشند. این سرویس به ویژه برای ساخت برنامه‌های وب یا اضافه کردن رابط‌های کاربری سفارشی در Google Docs، Sheets و Forms مفید است. حتی می‌توانید از آن برای تولید بدنه یک ایمیل استفاده کنید.

ایجاد فایل‌های HTML

برای افزودن یک فایل HTML به پروژه Apps Script خود، مراحل زیر را دنبال کنید:

  1. ویرایشگر اسکریپت برنامه‌ها را باز کنید.
  2. در سمت چپ، روی افزودن فایل > HTML کلیک کنید.

درون فایل HTML، می‌توانید اکثر کدهای استاندارد HTML، CSS و جاوا اسکریپت سمت کلاینت را بنویسید. صفحه به صورت HTML5 ارائه می‌شود، اگرچه برخی از ویژگی‌های پیشرفته HTML5 در دسترس نیستند، همانطور که در بخش محدودیت‌ها توضیح داده شده است.

فایل شما همچنین می‌تواند شامل اسکریپت‌های قالب باشد که قبل از ارسال صفحه به کاربر - مشابه PHP - در سرور پردازش می‌شوند، همانطور که در بخش مربوط به HTML قالب‌بندی شده توضیح داده شده است.

ارائه HTML به عنوان یک برنامه وب

برای ایجاد یک برنامه وب با سرویس HTML، کد شما باید شامل یک تابع doGet() باشد که به اسکریپت می‌گوید چگونه صفحه را ارائه دهد. این تابع باید یک شیء HtmlOutput را برگرداند، همانطور که در این مثال نشان داده شده است.

کد.gs 

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

فهرست.html 

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

وقتی آن چارچوب اولیه ایجاد شد، تنها کاری که باید انجام دهید این است که یک نسخه از اسکریپت خود را ذخیره کنید ، سپس اسکریپت خود را به عنوان یک برنامه وب مستقر کنید .

پس از اینکه اسکریپت به عنوان یک برنامه وب مستقر شد، می‌توانید آن را در یک Google Site نیز جاسازی کنید .

HTML را به عنوان رابط کاربری Google Docs، Sheets، Slides یا Forms ارائه دهید

سرویس HTML می‌تواند یک کادر محاوره‌ای یا نوار کناری را در Google Docs، Sheets، Slides یا Forms نمایش دهد، اگر اسکریپت شما به فایل متصل باشد. (در Google Forms، رابط‌های کاربری سفارشی فقط برای ویرایشگری که فرم را برای تغییر آن باز می‌کند قابل مشاهده هستند، نه برای کاربری که فرم را برای پاسخ دادن باز می‌کند.)

برخلاف یک برنامه وب، اسکریپتی که رابط کاربری برای یک سند، صفحه گسترده یا فرم ایجاد می‌کند، به طور خاص به تابع doGet() نیازی ندارد و شما نیازی به ذخیره نسخه‌ای از اسکریپت خود یا استقرار آن ندارید. در عوض، تابعی که رابط کاربری را باز می‌کند باید فایل HTML شما را به عنوان یک شیء HtmlOutput به متدهای showModalDialog()) یا showSidebar() شیء Ui برای سند، فرم یا صفحه گسترده فعال ارسال کند.

این مثال‌ها شامل چند ویژگی اضافی برای راحتی هستند: تابع onOpen() یک منوی سفارشی ایجاد می‌کند که باز کردن رابط را آسان می‌کند، و دکمه موجود در فایل HTML یک متد close() ویژه از API google.script.host را برای بستن رابط فراخوانی می‌کند.

کد.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');
}

فهرست.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() را به صورت دستی در ویرایشگر اسکریپت اجرا کنید یا پنجره ویرایشگر Docs، Sheets یا Forms را مجدداً بارگذاری کنید (که ویرایشگر اسکریپت را می‌بندد). پس از آن، منوی سفارشی باید هر بار که فایل را باز می‌کنید، ظرف چند ثانیه ظاهر شود. برای دیدن رابط ، گزینه Dialog > Open را انتخاب کنید.