أنشئ نظام حجز مواعيد احترافي ومجاني باستخدام Google Apps Script

مقدمة

هل تبحث عن طريقة سهلة ومجانية لتمكين عملائك من حجز المواعيد إلكترونياً دون الحاجة لبرامج معقدة أو اشتراكات مكلفة؟ مع Google Apps Script وخدمات جوجل المجانية، يمكنك بناء نظام حجز مواعيد متكامل وفعّال يناسب احتياجاتك!
في هذا الدليل، سنشرح لك فكرة المشروع، كيف يمكن لعملك الاستفادة منه، وخطوات التركيب والتشغيل لتجعل عملائك يحجزون مواعيدهم بضغطة زر.

فكرة المشروع: نظام حجز المواعيد الذكي

تخيل أن لديك عيادة، صالون تجميل، مركز استشارات، أو حتى تقدم دروسًا خصوصية. بدلاً من تلقي المكالمات أو الرسائل النصية لتحديد المواعيد، يمكنك الآن توفير نموذج إلكتروني بسيط لعملائك. يقوم هذا النموذج بجمع بياناتهم (الاسم، الجوال، الخدمة المطلوبة، التاريخ، الوقت، وغيرها)، ثم يقوم بحفظها تلقائيًا في جدول بيانات جوجل (Google Sheet) مخصص لك.
هذا النظام يوفر عليك الوقت والجهد، وينظم مواعيدك بشكل فعال، ويمنح عملائك تجربة حجز سلسة واحترافية. يعتمد النظام على قوة Google Apps Script لربط واجهة المستخدم (النموذج) بجدول البيانات، ليصبح جدول البيانات الخاص بك هو قاعدة البيانات لمواعيدك.

كيف تستفيد من نظام حجز المواعيد؟

هذا النظام مثالي لمجموعة واسعة من الأنشطة والخدمات:

العيادات والمراكز الصحية: لحجز مواعيد الكشف أو الاستشارات الطبية.
صالونات التجميل والحلاقة: لتمكين العملاء من حجز مواعيد الخدمات المختلفة.
المستشارون والمدربون: لجدولة جلسات الاستشارة أو الدورات التدريبية.
المدرسون الخصوصيون: لتنظيم حصص الطلاب ومواعيدها.
ورش الصيانة ومراكز الخدمة: لحجز مواعيد الصيانة أو الاستلام.
المصورون الفوتوغرافيون: لحجز جلسات التصوير.
أي عمل يتطلب تحديد مواعيد مسبقة!

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

متطلبات المشروع

كل ما تحتاجه لإنشاء هذا النظام هو:

حساب جوجل (Gmail): وهو مجاني وبسيط.
جوجل شيتس (Google Sheets): جدول البيانات الذي سيتم حفظ المواعيد فيه.
جوجل آبز سكريبت (Google Apps Script): بيئة البرمجة التي تربط كل شيء ببعضه.
خطوات تركيب وتشغيل نظام حجز المواعيد

خطوات إنشاء النظام

الخطوة 1: إعداد جدول بيانات جوجل (Google Sheet)

سنبدأ بإنشاء جدول البيانات الذي سيستقبل جميع حجوزاتك.
اذهب إلى Google Sheets وقم بإنشاء جدول بيانات جديد وفارغ.
ولا تشغل بالك بورقة العمل هذا الكود الرائع سيضيف ورقة عمل باسم حجوزات
من داخل جدول بيانات جوجل الذي أنشأته للتو، اذهب إلى القائمة العلوية: الإضافات ومنها برمجة التطبيقات. (Extensions) > Apps Script.

الخطوة 2 : سيتم فتح محرر Google Apps Script في نافذة جديدة الصورة التالية تقريبية من أجل التوضيح.

ستجد ملفًا افتراضيًا باسم Code.gs او الرمز رقم 3 في الصورة السابقة .
احذف أي كود موجود في ملف Code.gs.
الصق الكود التالي بالكامل في ملف Code.gs:

    function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .setTitle('نظام حجز المواعيد')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .addMetaTag('viewport', 'width=device-width, initial-scale=1');
}

function submitForm(formData) {
  try {
    // استخدم جدول البيانات النشط بدلاً من معرف ثابت
    const spreadsheet = SpreadsheetApp.getActiveSpreadsheet(); 
    const sheetName = 'حجوزات';

    let sheet = spreadsheet.getSheetByName(sheetName);

    if (!sheet) {
      sheet = spreadsheet.insertSheet(sheetName);
      // إضافة عناوين الأعمدة
      sheet.appendRow([
        'م', // العمود التسلسلي
        'الاسم',
        'رقم الجوال',
        'البريد الإلكتروني',
        'التاريخ',
        'الوقت',
        'نوع الخدمة',
        'ملاحظات',
        'كيف سمعت عنا',
        'الاشتراك في النشرات',
        'تاريخ التسجيل'
      ]);
    }

    // لتحديد رقم الصف الحالي الذي سيتم فيه الإضافة
    // إذا كان الصف الأول هو الرؤوس، فإن أول صف للبيانات سيكون الصف الثاني (2)
    // getLastRow() يعطي آخر صف فيه بيانات. إذا كان الجدول فارغاً باستثناء الرؤوس، فسيكون 1.
    // لذا، الصف الجديد سيكون getLastRow() + 1
    // بما أننا نستخدم appendRow، فهو يضيف تلقائياً للسطر التالي المتاح،
    // ثم يمكننا الحصول على رقمه بعد الإضافة مباشرةً.
    
    // إضافة البيانات الجديدة
    sheet.appendRow([
      sheet.getLastRow() + 1, // رقم الصف الحالي + 1 (ليعكس الترقيم التسلسلي)
      formData.name,
      formData.phone,
      formData.email,
      formData.date,
      formData.time,
      formData.service,
      formData.notes || '', // حقل اختياري
      formData.reference || '', // حقل اختياري
      formData.newsletter ? 'نعم' : 'لا', // خانة اختيار
      new Date() // تاريخ ووقت التسجيل
    ]);

    // تنسيق الخلايا
    const lastRow = sheet.getLastRow(); // هنا getLastRow() سيعطي رقم الصف الذي تم إضافته للتو
    const range = sheet.getRange(lastRow, 1, 1, 11);
    range.setHorizontalAlignment('right');

    return { success: true };

  } catch (e) {
    console.error('Error submitting form:', e);
    throw new Error('حدث خطأ أثناء حفظ البيانات. يرجى المحاولة مرة أخرى.');
  }
}

تغيير اسم المشروع: يمكنك تغيير اسم المشروع من أعلى (مثلاً: نظام حجز المواعيد).

الخطوة 3: إنشاء ملف الواجهة الأمامية (index.html)

الآن سنقوم بإنشاء واجهة النموذج التي سيراها المستخدمون.
في محرر Google Apps Script، انقر على أيقونة + بجوار Files (الملفات) في الشريط الجانبي رقم 2 في الصورة السابقة .
اختر HTML file.
اكتب اسم الملف index ثم اضغط Enter. (تأكد أن الاسم هو index فقط، بدون .html).
احذف أي كود موجود في الملف
الصق الكود التالي بالكامل في ملف index.html:

          <!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>نظام حجز المواعيد</title>
  
  <!-- Bootstrap RTL -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
  
  <!-- SweetAlert2 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
  
  <!-- Tajawal Arabic Font -->
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
  
  <style>
    :root {
      --primary-color: #5d5fef;
      --primary-hover: #4b4ddf;
      --text-color: #333;
    }
    
    body {
      font-family: 'Tajawal', sans-serif;
      background-color: #f5f7fa;
      padding: 20px;
    }
    
    .form-container {
      background: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      padding: 30px;
      max-width: 800px;
      margin: 30px auto;
    }
    
    .form-title {
      color: var(--primary-color);
      font-weight: 700;
      text-align: center;
      margin-bottom: 25px;
      position: relative;
      padding-bottom: 15px;
    }
    
    .form-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 50%;
      transform: translateX(50%);
      width: 80px;
      height: 3px;
      background: var(--primary-color);
    }
    
    .form-label {
      font-weight: 600;
      margin-bottom: 8px;
    }
    
    .btn-submit {
      background: var(--primary-color);
      border: none;
      padding: 12px;
      font-weight: 600;
      transition: all 0.3s;
    }
    
    .btn-submit:hover {
      background: var(--primary-hover);
      transform: translateY(-2px);
    }
    
    /* تصميم قسم التفاصيل الإضافية */
    .additional-details {
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 20px;
      margin-top: 30px;
      border: 1px dashed #ddd;
    }
    
    .additional-details .section-title {
      color: #6c757d;
      font-weight: 600;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
    }
    
    .additional-details .section-title::before {
      content: "";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      margin-left: 8px;
    }
    
    @media (max-width: 768px) {
      .form-container {
        padding: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="form-container">
    <h2 class="form-title">نموذج حجز موعد</h2>
    <form id="bookingForm">
      <div class="row g-3">
        <div class="col-md-6">
          <label for="name" class="form-label">الاسم الكامل</label>
          <input type="text" class="form-control" id="name" name="name" required>
        </div>
        
        <div class="col-md-6">
          <label for="phone" class="form-label">رقم الجوال</label>
          <input type="tel" class="form-control" id="phone" name="phone" required>
        </div>
        
        <div class="col-md-6">
          <label for="email" class="form-label">البريد الإلكتروني</label>
          <input type="email" class="form-control" id="email" name="email" required>
        </div>
        
        <div class="col-md-6">
          <label for="date" class="form-label">التاريخ</label>
          <input type="date" class="form-control" id="date" name="date" required>
        </div>
        
        <div class="col-md-6">
          <label for="time" class="form-label">الوقت</label>
          <input type="time" class="form-control" id="time" name="time" required>
        </div>
        
        <div class="col-md-6">
          <label for="service" class="form-label">نوع الخدمة</label>
          <select class="form-select" id="service" name="service" required>
            <option value="" selected disabled>اختر الخدمة</option>
            <option value="استشارة">استشارة</option>
            <option value="فحص">فحص طبي</option>
            <option value="علاج">علاج</option>
          </select>
        </div>
        
        <!-- قسم التفاصيل الإضافية -->
        <div class="col-12 additional-details">
          <div class="section-title">تفاصيل إضافية (اختياري)</div>
          
          <div class="row g-3">
            <div class="col-md-6">
              <label for="notes" class="form-label">ملاحظات</label>
             <input type="text" class="form-control" id="notes" name="notes" placeholder="أي معلومات إضافية تريد مشاركتها">
            </div>
            
            <div class="col-md-6">
              <label class="form-label">كيف سمعت عنا؟</label>
              <select class="form-select" id="reference" name="reference">
                <option selected="" value="">اختر المصدر</option>
                <option value="صديق">صديق</option>
                <option value="مواقع التواصل">مواقع التواصل</option>
                <option value="إعلان">إعلان</option>
                <option value="أخرى">أخرى</option>
              </select>
            </div>
            
            <div class="col-12">
              <div class="form-check">
                <input class="form-check-input" id="newsletter" name="newsletter" type="checkbox" />
                <label class="form-check-label">
                  أرغب في تلقي العروض الترويجية والنشرات الإخبارية
                </label>
              </div>
            </div>
          </span>
        
        
        <div class="col-12">
          <button class="btn btn-primary btn-submit w-100" type="submit">حجز الموعد</button>
        </div>
      
    
  <!--Font Awesome-->
  <script crossorigin="anonymous" src="https://kit.fontawesome.com/a076d05399.js"></script>
  
  <!--SweetAlert2 JS-->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  
  <script>
    document.getElementById('bookingForm').addEventListener('submit', function(e) {
      e.preventDefault();
      
      const formData = new FormData(this);
      const data = Object.fromEntries(formData.entries());
      
      // إظهار رسالة تحميل
      Swal.fire({
        title: 'جاري المعالجة',
        html: 'يتم حفظ البيانات...',
        allowOutsideClick: false,
        didOpen: () => {
          Swal.showLoading();
        }
      });
      
      // إرسال البيانات إلى Google Apps Script
      google.script.run
        .withSuccessHandler((response) => {
          Swal.fire({
            title: 'نجاح!',
            text: 'تم حجز الموعد بنجاح',
            icon: 'success',
            confirmButtonText: 'حسناً'
          }).then(() => {
            document.getElementById('bookingForm').reset();
          });
        })
        .withFailureHandler((error) => {
          Swal.fire({
            title: 'خطأ!',
            text: error.message || 'حدث خطأ أثناء الحفظ',
            icon: 'error',
            confirmButtonText: 'حسناً'
          });
        })
        .submitForm(data);
    });
  </script>
  </body>
 </html>

الخطوة 4: نشر المشروع كتطبيق ويب (Web App)

هذه هي الخطوة الأخيرة التي ستحول مشروعك إلى رابط يمكن لأي شخص الوصول إليه واستخدامه.
في محرر Google Apps Script، انقر على أيقونة نشر (Deploy) في الزاوية العلوية ، ثم اختر عملية نشر جديدة (New deployment).
انقر على تحديد نوع (Select type) (على شكل ترس ⚙️) واختر تطبيق ويب (Web app).

ستظهر لك إعدادات النشر:
الوصف (Description): اكتب أي وصف مناسب (مثلاً: نظام حجز المواعيد).
تنفيذ باسم (Execute as): اختر أنا (Me).
من لديه إذن الوصول (Who has access): اختر أي مستخدم (Anyone). هذا سيجعل النموذج متاحًا للجميع.
انقر على نشر (Deploy).
قد يطلب منك Google Apps Script تفويض الوصول. هذه خطوة أمان طبيعية:
انقر على تفويض الوصول (Authorize access).
اختر حساب جوجل الخاص بك.
قد تظهر رسالة تحذير "Google لم يتحقق من هذا التطبيق" (Google hasn't verified this app)، هذا أمر طبيعي لأنه تطبيقك الخاص. انقر على الإعدادات المتقدمة (Advanced) ثم الانتقال إلى (اسم مشروعك) (Go to [Your project name] (unsafe)).
انقر على سماح (Allow) لمنح الأذونات اللازمة.

بعد التفويض، ستظهر لك نافذة تم نشر تطبيق الويب (Web app deployed). ستجد فيها عنوان URL لتطبيق الويب (Web app URL).
انسخ هذا الرابط! هذا هو رابط نموذج حجز المواعيد الخاص بك الذي يمكنك مشاركته.

رابط لمعاينة النظام الذي تم إنشاؤه بنفس الأكواد
تحديثات المشروع

إذا قمت بإجراء أي تغييرات على الكود في ملف Code.gs أو index.html، يجب عليك نشر إصدار جديد:
ارجع إلى محرر Google Apps Script.
انقر على نشر (Deploy) > إدارة عمليات النشر (Manage deployments).
انقر على شكل القلم ✏️ بجوار النشر الحالي.
في نافذة التحرير، تأكد من اختيار رأس جديد (New head) لـ Version.
انقر على نشر (Deploy).

خاتمة

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

دمتم بخير

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

أنشئ نظام حجز مواعيد احترافي ومجاني باستخدام Google Apps Script - م3

مقدمة

فكرة المشروع: نظام حجز المواعيد الذكي

كيف تستفيد من نظام حجز المواعيد؟

متطلبات المشروع

خطوات إنشاء النظام

خاتمة

علي الخضر

بلال أيوب