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

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