طريقة إنشاء نموذج إدخال باستخدام Google Apps Script

📄تمهيد

هل ترغب في إنشاء نموذج إدخال بيانات بسيط، وفعال باستخدام Google Apps Script وGoogle Sheets؟

يمكنك إنشاء نموذج مخصص لجمع المعلومات سواء كانت درجات طلاب ، جمع اراء ، منتجات في مخازن ، ملاحظات، مشاركات، أو تقارير... إلخ.

في هذه المقالة ، ستتعلم كيف تنشئ نموذجًا يعمل على جميع الأجهزة ويخزن البيانات مباشرة في جدول بيانات.

🧭 الخطوة 1: إعداد Google Sheets

ابدأ بإنشاء ملف Google Sheets جديد، ثم قم بإنشاء ورقة باسم DATA حيث سيتم حفظ البيانات المدخلة من النموذج.
اذا رغبت في تغير اسم ورقة العمل يمكن تحديد الاسم المناسب لك ثم تعديل الاسم في الكود.

🧠 الخطوة 2: إضافة كود التطبيق في Apps Script

من داخل Google Sheets، اختر : قائمة الإضافات ومنها برمجة التطبيقات ثم أضف الكود التالي داخل ملف code.gs قد يكون اسمه الرمز حسب اللغة التي تستخدمها يفضل تغير اسمه .

لا تنسى بعد كل تعديل نقر زر الحفظ
📌 لنسخ الكود بالكامل انقر داخل المربع التالي ثم اضغط Ctrl + A ثم Ctrl + C.

function doGet(e) {
  var output = HtmlService.createTemplateFromFile('index');
  return output.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function AddRecord(point1, point2, point3, point4, point5, point6, point7) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var dataSheet = ss.getSheetByName("DATA");
  dataSheet.appendRow([new Date(), point1, point2, point3, point4, point5, point6, point7]);
  return '✅ تم إرسال البيانات بنجاح';
}

📄 الخطوة 3: إنشاء واجهة النموذج باستخدام HTML

في قسم الملفات انقر + لاضافة ملف بامتداد html .
أنشئ ملف جديد داخل Apps Script باسم index.html، وأضف الكود التالي لتصميم واجهة النموذج.
📌 لنسخ الكود بالكامل: انقر داخل المربع ثم اضغط Ctrl + A ثم Ctrl + C.

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <title>نموذج إدخال باستخدام Google Apps Script</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .glassmorphism {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      padding: 30px 25px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      max-width: 550px;
      width: 100%;
    }

    h2 {
      text-align: center;
      color: #333;
      margin-bottom: 25px;
    }

    .form-group {
      margin-bottom: 18px;
    }

    .form-label {
      font-weight: bold;
      margin-bottom: 5px;
      display: block;
      color: #444;
    }

    .form-control {
      width: 100%;
      padding: 10px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background-color: #fff;
      color: #333;
    }

    .btn-primary {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      width: 100%;
      font-size: 16px;
    }

    .feedback {
      margin-top: 15px;
      text-align: center;
      font-weight: bold;
      padding: 10px;
      border-radius: 5px;
      display: none;
    }

    .success {
      background-color: #d4edda;
      color: #155724;
    }

    .error {
      background-color: #f8d7da;
      color: #721c24;
    }

    @media (max-width: 600px) {
      .glassmorphism {
        padding: 20px 15px;
      }

      h2 {
        font-size: 20px;
      }

      .btn-primary {
        font-size: 15px;
        padding: 10px;
      }

      .form-label {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="glassmorphism">
    <h2>نموذج إدخال باستخدام Google Apps Script</h2>
    <form onsubmit="AddRow(); return false;">
      <div class="form-group">
        <label for="point1" class="form-label">النقطة 1 <span style="color:red">*</span></label>
        <input type="text" id="point1" class="form-control" required>
      </div>
      <div class="form-group">
        <label for="point2" class="form-label">النقطة 2</label>
        <input type="text" id="point2" class="form-control">
      </div>
      <div class="form-group">
        <label for="point3" class="form-label">النقطة 3</label>
        <input type="text" id="point3" class="form-control">
      </div>
      <div class="form-group">
        <label for="point4" class="form-label">النقطة 4</label>
        <input type="text" id="point4" class="form-control">
      </div>
      <div class="form-group">
        <label for="point5" class="form-label">النقطة 5</label>
        <input type="text" id="point5" class="form-control">
      </div>
      <div class="form-group">
        <label for="point6" class="form-label">النقطة 6</label>
        <input type="text" id="point6" class="form-control">
      </div>
      <div class="form-group">
        <label for="point7" class="form-label">النقطة 7</label>
        <input type="text" id="point7" class="form-control">
      </div>

      <p style="color: #555; text-align: center; font-size: 15px; margin-bottom: 10px;">
        الحقول المشار إليها بـ<span style="color:red;">*</span> مطلوبة
      </p>

      <button type="submit" class="btn-primary animate__animated animate__fadeInUp">إرسال البيانات</button>
      <div id="display" class="feedback"></div>
    </form>
  </div>

  <script>
    function showMessage(text, type) {
      const display = document.getElementById("display");
      display.innerHTML = text;
      display.className = "feedback " + type;
      display.style.display = "block";
      setTimeout(() => {
        display.style.display = "none";
        display.className = "feedback";
      }, 5000);
    }

    function onSuccess(message) {
      ["point1", "point2", "point3", "point4", "point5", "point6", "point7"].forEach(id => {
        document.getElementById(id).value = "";
      });
      showMessage(message, "success");
    }

    function onFailure(error) {
      showMessage("حدث خطأ أثناء الإرسال: " + error.message, "error");
    }

    function AddRow() {
      var point1 = document.getElementById("point1").value.trim();
      if (point1 === "") {
        showMessage("يرجى تعبئة النقطة 1 قبل الإرسال", "error");
        return;
      }
      var point2 = document.getElementById("point2").value;
      var point3 = document.getElementById("point3").value;
      var point4 = document.getElementById("point4").value;
      var point5 = document.getElementById("point5").value;
      var point6 = document.getElementById("point6").value;
      var point7 = document.getElementById("point7").value;

      google.script.run.withSuccessHandler(onSuccess)
                       .withFailureHandler(onFailure)
                       .AddRecord(point1, point2, point3, point4, point5, point6, point7);
    }
  </script>
</body>
</html>

🚀 الخطوة 4: نشر التطبيق

من محرر Apps Script، اختر "نشر → نشر كتطبيق ويب ستجد رمز لاختيار نوع التطبيق ".

قم بتعبئة البيانات

الوصف لفهم اخر تعديلات
التنفيذ باسمك.
من يمكنه الوصول: أي شخص.
انقر زر نشر.
سينتقل بك الى تحديد تفويض الوصل لابد من السماح بذلك انقر خيارات متقدمة لذلك.

بعد السماح ستحصل على رابط جاهز للنشر.

🌟 مميزات التطبيق

✅ واجهة سهلة الاستخدام ومتجاوبة مع جميع الأجهزة.
✅ تصميم أنيق باستخدام تقنية Glassmorphism.
✅ حفظ البيانات مباشرة في Google Sheets بدون الحاجة لقواعد بيانات خارجية.
✅ مرونة في الاستخدام لأي نوع من البيانات (أخبار، مشاركات، نتائج... إلخ).
✅ رسائل تأكيد مرئية بعد الإرسال لتوضيح نجاح العملية أو ظهور أي خطأ.

📌 ملاحظات ختامية

هذا التطبيق هو نسخة مجانية مفتوحة المصدر قابلة للتخصيص. يمكنك تعديل أسماء الحقول أو عددها بحسب نوع الاستخدام المطلوب.
لنسخ أي كود استخدمناه في المقالة، انقر داخل مربع النص ثم اضغط Ctrl + A لتحديد الكل، ثم Ctrl + C للنسخ.
هل لديك استفسار أو اقتراح تطوير؟ شارك رأيك في التعليقات، وسأكون سعيدًا بالتفاعل معك ✨
سيتم توفير نسخة مدفوعة بها خصائص افضل سيعلن عنها في وقتها إن شاء الله .
ايضا ستجد داخل تطبيق المدونة حيل احترافية لتطوير هذا التطبيق وبشكل مجاني.
حتى اذا لم ترغب في هذا التطبيق حاليا جرب فقد تحتاجه مستقبلا او يولد لك افكار جديدة.

سؤال مهم جدا هل هذا افضل ام نماذج جوجل بلا شك نماذج جوجل ويمكن ربطها بجدول محدد تستخدمه في اغراض اخرى وانما هذا التطبيق يعتبر فعال مع اغراض خاصة انت واحتياجاتك

كيف تطوّر م1 باحتراف؟

يمكنك تخصيص النموذج وتعديله بسهولة من داخل ملف index.html أو الكود البرمجي code.gs، ومن أبرز الحيل:

تقليل أو زيادة عدد الحقول احذف أو أضف مدخلات حسب الحاجة، مع تعديل عدد المعاملات داخل دالة AddRecord(point1, point2, ...) في code.gs.
ثم احذف او اضف الوسم الخاص به داخل ملف index.html لابد من توحيد المسميات .

جعل حقل معين مطلوبًا

أضف الوسم required داخل مدخل <input> مثل:
<input type="text" id="point3" required>

تغيير نوع الإدخال حسب الغرض تغير قيمة type :

لفرض إدخال بريد إلكتروني: type="email"
للأرقام فقط: type="number"
رقم بطول محدد: استخدم pattern مثل: <input type="tel" pattern="[0-9]{10}">

تعديل الألوان والتنسيق غيّر خصائص CSS مثل:

.btn-primary { background-color: #28a745; }
يمكنك كذلك تعديل لون الخلفية، الخط، أو شكل الحواف بسهولة.

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

دمتم بخير

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

طريقة إنشاء نموذج إدخال باستخدام Google Apps Script - م1