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