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

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

إنشاء ملفات HTML

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

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

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