إنشاء صفحات متعددة في تطبيق الويب Google Apps Script

المقدمة

مقالة اليوم حول الصفحات المتعددة في تطبيق Google Apps Script Web App، عند إنشاء تطبيق ويب باستخدام Google Apps Script، فإن استخدام الصفحات المتعددة يمكن أن يكون مفيدًا جدًا لتحسين تجربة المستخدم وتنظيم المحتوى بطريقة أكثر فعالية. إليك بعض الفوائد الأساسية:

تحسين التنظيم: يتيح لك تقسيم التطبيق إلى عدة صفحات عرض البيانات والوظائف المختلفة بطريقة أكثر ترتيبًا.
سهولة التنقل: يمكن للمستخدمين التنقل بين الصفحات بسهولة دون الحاجة إلى تحميل التطبيق بالكامل في كل مرة.
زيادة الأداء: يقلل من تحميل المحتوى غير الضروري، مما يحسن سرعة واستجابة التطبيق مما يجنبك الضغط على مشروعك فيمكنك تقسيم النتائج على اكثر من مشروع وجمعهم في مشروع واحد كل مشروع في صفحة لكنه يظهر للجمهور كأنه مشروع واحد وهى اكثر شكوى الفترة الاخيرة عند زيادة عدد الطلاب .
تجربة مستخدم متقدمة: يمكنك إنشاء واجهات أكثر تعقيدًا تتناسب مع احتياجات المستخدم بطريقة ديناميكية.
معاينة التصميم

وننتقل الى التطبيق بشكل مباشر وسنعتمد في هذه المقالة على انك تعرف طريقة تصميم Google Apps Script Web App

الحاويات

ستحتاج الى انشاء ثلاث حاويات اساسية بالاضافة الى اي عدد تحتاج اليه من الصفحات هنا سيكون المشروع على ثلاث صفحات واسماء الحاويات كالتالي:

كود التطبيقات : Code.gs
الرأس المشترك بين الصفحات : header.html
الصفحة الرئيسية : mail.html
الصفحة الاولى : page1.html
الصفحة الثانية : page2.html
الصفحة الثالثة : page3.html

محتوى الحاويات

انقر دخال مربع النص واضغط ctrl+a او حدد النص بالماوس وانسخه ثم الصقه في المكان المناسب لكل حاوية

Code.gs

function doGet(e) {
  let page = e.parameter.page;         //01
  if (page == null) page = "index";     //02
  var output = HtmlService.createTemplateFromFile(page); //03
  return output.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);  //04
}

function includeHeader()   //05
{
  return HtmlService.createTemplateFromFile("header.html").evaluate().getContent();
}

function myURL()  //06
{
  return ScriptApp.getService().getUrl();
}

header.html

<head>
  <base target="_top">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
  </script>

  <script src="https://code.jquery.com/jquery-3.7.0.min.js"
    integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">  

  <style>
    body {
      background-color: rgba(58, 103, 177, 0.3);
      direction: rtl;
      text-align: right;
    }

    .mycolor {
      background-color: #3a67b1;
    }

    .color {
      color: #3a67b1;
    }

    .navbar-nav {
      margin-right: auto;
    }

    .dropdown-menu {
      text-align: right;
      direction: rtl;
    }

  </style>

</head>

<nav class="navbar navbar-expand-lg mycolor px-2">
  <div class="container-fluid">
    <a class="navbar-brand text-white" href="<?= myURL(); ?>">عُذْرًا فِلَسْطِينُ</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      القائمة <!-- إضافة كلمة "القائمة" داخل الزر -->
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active text-white" href="<?= myURL(); ?>">الرئيسية</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="<?= myURL(); ?>?page=page1">صفحة 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="<?= myURL(); ?>?page=page2">صفحة 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="<?= myURL(); ?>?page=page3">صفحة 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-white" href="<?= myURL(); ?>?page=page3">صفحة 4</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

mail.html

<!DOCTYPE html>
<html>

<body onload="">
  <?!=includeHeader();?>
  <br><br><br><br><br><br>
  <center><h1>مرحباً بكم في الصفحة الرئيسية</h1></center>
</body>

</html>

page3.html-page2.html-page1.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
      <?!=includeHeader();?>
<!--كل ما يسبق هذالسطر لا تعدل فيه شيئ ويمكن اضافية اي محتوى اسفل السطر-->

       <br><br><br><br><br><br>
       <center><h1>
        هذه
         الصفحة
          رقم
           1
        </h1></center>
  </body>
</html>

التعديل على الاكواد

لن تحتاج اجراء اي تعديلات في code و header الا بعض الجمل العربية اذا اردت ذلك مع الحذر
الاسكربت يتميز باستجابته لجميع الشاشات التي يعرض عليها كمبيوتر وهواتف الى اخره
اغلب التعديلات ستكون داخل الصفحات اكتب فيها ما تشاء او قم بتضمين اي مشاريع لك فيها
اذا اردت تعديل مسمى الصفحات فقط ستجده في header ما بين الاسطر 52 الى 66 ولن اكرر كل مرة الحذر عند التعديل والحفاظ على اي رموز موجودة.
اذا اردت زيادة عدد الصفحات يمكنك تكرار اسطر الخطوة السابقة بنفس الشكل حسب الصفحات الجديدة وايضا اضافة حاوية جديدة باسم الصفحة الجديد.
سبق وذكرنا اكواد الالوان يمكن تغير كود اللون كما ترغب.
حاوية main هى الصفحة الرئيسية لك يمكنك جعلها صفحة تعريفية او ترحيبية لموقعك
بعد ان لصقت اكواد الصفحات ستجد عبارة "هذه الصفحة رقم 1" غير كل صفحة برقمها.
توجد عبارة " <?!=includeHeader();?> " في كل صفحة لا تقترب منها وكررها في اي صفحة جديدة والا توقف المشروع بأكمله.

الخلاصة

جرب هذا المشروع ستجد حل لمشاكلك وتحسن كبير في تصميم مشروعك.
جرب هذه الفكرة حتى وان لم تحتاج اليها الآن ستفتح لك افكار جديد.
لطريقة تضمين مشاريع في صفحات الويب اذهب لهذه المقالة.
لاستخدام كود الألوان اليك هذا الموقع.
انصحك بتثبت برنامج vscode قد يساعدك في الكثير من التعديلات.
اذا اردت ان تصمم الفكرة لآخرين او احد ينفذها لك انتظرك في هذه المقالة.
قد اقوم بشرح المشروع قريبا فيديو إن شاء الله وسيتم الادراج هنا فحمل تطبيق المدونة من اعلى لمعرفة ذلك.

دمتم بخير

مدونة علي الخضر