خدمة HTML: إنشاء وعرض HTML

تتيح لك خدمة HTML عرض صفحات الويب التي يمكنها التفاعل مع وظائف "برمجة التطبيقات" من جهة الخادم. وهي مفيدة بشكل خاص لإنشاء تطبيقات الويب أو إضافة واجهات مستخدم مخصصة في "مستندات Google" و"جداول بيانات Google" و"نماذج Google". ويمكنك أيضًا استخدامه لإنشاء نص رسالة إلكترونية.

إنشاء ملفات HTML

لإضافة ملف HTML إلى مشروع "برمجة تطبيقات Google"، اتّبِع الخطوات التالية:

  1. افتح محرِّر "برمجة تطبيقات Google".
  2. على يمين الصفحة، انقر على إضافة ملف > HTML.

داخل ملف HTML، يمكنك كتابة معظم محتوى HTML العادي وCSS وJavaScript من جهة العميل. سيتم عرض الصفحة بتنسيق 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.

عرض HTML كواجهة مستخدم في "مستندات Google" أو "جداول بيانات Google" أو "العروض التقديمية من Google" أو "نماذج Google"

يمكن لخدمة HTML عرض مربع حوار أو شريط جانبي في "مستندات Google" أو "جداول بيانات Google" أو "العروض التقديمية من Google" أو "نماذج Google" إذا كان النص البرمجي مربوطًا بحاوية في الملف. (في "نماذج Google"، لا تكون واجهات المستخدم المخصّصة مرئية إلّا للمحرِّر الذي يفتح النموذج لتعديله، وليس للمستخدم الذي يفتح النموذج للردّ عليه).

على عكس تطبيق الويب، لا يحتاج النص البرمجي الذي ينشئ واجهة مستخدم لمستند أو جدول بيانات أو نموذج إلى وظيفة doGet() على وجه التحديد، ولا تحتاج إلى حفظ نسخة من النص البرمجي أو نشره. بدلاً من ذلك، يجب أن تمرِّر الدالة التي تفتح واجهة المستخدم ملف HTML ككائن HtmlOutput إلى طريقة showModalDialog()) أو showSidebar() في عنصر Ui للمستند أو النموذج أو جدول البيانات النشط.

تشمل هذه الأمثلة بعض الميزات الإضافية التي توفّر لك الراحة: تنشئ الدالة onOpen() قائمة مخصّصة تسهّل فتح الواجهة، في حين يستدعي الزر في ملف HTML طريقة close() خاصة لواجهة برمجة التطبيقات google.script.host لإغلاق الواجهة.

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() يدويًا في أداة تعديل النصوص البرمجية أو إعادة تحميل نافذة أداة تعديل "مستندات Google" أو "جداول بيانات Google" أو "نماذج Google" (والتي ستؤدي إلى إغلاق أداة تعديل النصوص البرمجية). بعد ذلك، يُفترض أن تظهر القائمة المخصصة في غضون بضع ثوانٍ في كل مرة تفتح فيها الملف. اختر مربع حوار > فتح لرؤية الواجهة.