خدمة 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 API لإغلاق من واجهة pyplot.

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