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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

إنشاء ملفات HTML

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

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

يمكنك كتابة معظم علامات HTML وCSS وJavaScript من العميل في ملف HTML. سيتم عرض الصفحة بتنسيق 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" (التي ستغلق محرّر النصوص البرمجية). من المفترض أن تظهر القائمة المُخصَّصة خلال بضع ثوانٍ في كل مرة تفتح فيها الملف. اختَر Dialog > Open للاطّلاع على الواجهة.