طريقة عرض بيانات من داخل جدول باستخدام Google Apps Script

تطبيق الأسئلة الشائعة التفاعلي باستخدام Google Apps Script

تمهيد

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

✨ مميزات التطبيق:

✅ عرض تفاعلي وجذاب للأسئلة والأجوبة باستخدام تأثيرات CSS وSVG
📱 متوافق مع جميع الأجهزة (كمبيوتر، هاتف، لوحي)
🌐 ربط مباشر مع Google Sheets يوفر تحديث تلقائي
🧩 قابل للتعديل والتطوير حسب الاحتياج
📁 يعمل بالكامل داخل Google Workspace بدون الحاجة لاستضافة خارجية

🛠️ خطوات تركيب التطبيق:

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

أنشئ ورقة باسم DATA تحتوي على الأسئلة في العمود الثاني، والأجوبة في الأعمدة التالية.
اذا رغبت في تغير اسم ورقة العمل يمكن تحديد الاسم المناسب لك ثم تعديل الاسم في الكود.
العمود الاول لترقيم الاسئلة ولن يظهر انما فقط لك ستجد له استخدامات مهمة اكتشفها.

🧠 الخطوة 2: إضافة كود التطبيق في Apps Script
- من داخل Google Sheets، اختر : قائمة الإضافات ومنها برمجة التطبيقات ثم أضف الكود التالي داخل ملف code.gs قد يكون اسمه الرمز حسب اللغة التي تستخدمها يفضل تغير اسمه .
- لا تنسى بعد كل تعديل نقر زر الحفظ
- 📌 لنسخ الكود بالكامل انقر داخل المربع التالي ثم اضغط Ctrl + A ثم Ctrl + C.
function doGet() { var output = HtmlService.createHtmlOutputFromFile('index'); output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); return output; } function getFAQDataFromSheet() { var sheetId = "**********"; var sheet = SpreadsheetApp.openById(sheetId).getSheetByName("DATA"); var lastRow = sheet.getLastRow(); var lastColumn = sheet.getLastColumn(); var range = sheet.getRange("B2:" + sheet.getRange(lastRow, lastColumn).getA1Notation()); var values = range.getValues(); var FAQData = []; values.forEach(function (row) { var question = row[0]; var answer = []; for (var i = 1; i < row.length; i++) { if (row[i] !== "") { answer.push(row[i]); } else { break; //توقف عن إضافة النقاط إذا واجهت خلية فارغة } } FAQData.push({ question: question, answer: answer }); }); return FAQData; }

ارجع الى جدول البيانات الخاص بك وانسخ الرابط الخاص به من شريط العنوان في المتصفح مثلا عندي كان في مثال الشرح هكذا :
ستقوم بنسخ الجزء الموجود بين edit/ وبين /d كما هو محدد بالأزرق في الصورة وتلصقه مستبدلا الموجود في السطر 2 داخل القوسين والعلامة المفردة (' ')
تأكد انك لم تحذف علامات التنصيص المفردة ووضعت المفتاح داخلها انقر حفظ .
استبدل بالنجوم معرف الجدول الذي ترغب في عرض بياناته
لا تنسى بعد كل تعديل نقر زر الحفظ

📄 الخطوة 3: إنشاء واجهة النموذج باستخدام HTML
- في قسم الملفات انقر + لاضافة ملف بامتداد html .
- أنشئ ملف جديد داخل Apps Script باسم index.html، وأضف الكود التالي لتصميم واجهة النموذج.
- 📌 لنسخ الكود بالكامل: انقر داخل المربع ثم اضغط Ctrl + A ثم Ctrl + C.
<!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap"); h2.faq-heading { font-family: "Inter", sans-serif; text-align: center; font-weight: 300; font-size: 28px; color: #1d3557; margin: 8px 0; margin-top: 60px; } .faq-container { max-width: 900px; border-radius: 8px; box-shadow: 0 4px 50px -8px rgba(0, 0, 0, 0.3); margin: 32px auto; font-family: "Inter", sans-serif; color: #1d3557; line-height: 1.9; } .faq-container .question-container { border-bottom: 1px solid #eee; } .faq-container .question { display: flex; justify-content: space-between; gap: 32px; font-size: 18px; font-weight: bold; padding: 16px 24px; cursor: pointer; } .faq-container .question .question-icon { width: 20px; height: 20px; background: #eee; padding: 4px; border-radius: 50%; flex-shrink: 0; display: flex; transition: all 300ms ease; } .faq-container .question-container.expanded .question-icon { background: #2a9d8f; color: #fff; transform: rotateZ(180deg); } .faq-container .answer { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; } .faq-container .answer .answer-icon { width: 20px; flex-shrink: 0; color: blue; display: flex; margin-top: 5px; } .faq-container .answer-container { padding: 0px 32px; background: #edf2f4; max-height: 0; overflow: hidden; transition: all 300ms ease; } .faq-container .question-container.expanded .answer-container { max-height: 500px; padding: 8px 32px; } </style> </head> <body> <h2 class="faq-heading">مجموعة من العناوين وتفاصيلها</h2> <div class="faq-container"></div> <script> google.script.run.withSuccessHandler(displayFAQ).getFAQDataFromSheet(); function displayFAQ(FAQData) { const FAQContainer = document.querySelector(".faq-container"); FAQData.forEach(function(q, index) { const answerHTML = q.answer .map(function(a) { return `<div class="answer"> <span class="answer-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/> </svg> </span> ${a} </div>`; }) .join(""); const html = `<div class="question"> ${q.question} <span class="question-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg></span> </div> <div class="answer-container"> ${answerHTML} </div>`; const questionContainer = document.createElement("div"); questionContainer.classList.add("question-container"); questionContainer.innerHTML = html; FAQContainer.appendChild(questionContainer); const question = questionContainer.querySelector(".question"); question.addEventListener("click", function() { const isExpanded = !questionContainer.classList.contains("expanded"); removeAllExpanded(); questionContainer.classList.toggle("expanded", isExpanded); const answerContainer = questionContainer.querySelector(".answer-container"); answerContainer.style.maxHeight = isExpanded ? `${answerContainer.scrollHeight}px` : "0"; }); }); } function removeAllExpanded() { const questionContainers = document.querySelectorAll(".faq-container .question-container"); questionContainers.forEach(function(q) { q.classList.remove("expanded"); const answerContainer = q.querySelector(".answer-container"); answerContainer.style.maxHeight = "0"; }); } </script> </body> </html>

🚀 الخطوة 4: نشر التطبيق
- من محرر Apps Script، اختر "نشر → نشر كتطبيق ويب ستجد رمز لاختيار نوع التطبيق ".
- قم بتعبئة البيانات
- بعد السماح ستحصل على رابط جاهز للنشر.

🎯 الفائدة العملية:

هذا التطبيق يمكن استخدامه في:

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

📝 الخاتمة:

تطبيق الأسئلة الشائعة هذا ليس مجرد أداة عرض، بل منصة تفاعلية تُسهّل الوصول للمعلومة بسرعة وأناقة. والأجمل أنه قابل للتعديل حسب احتياجاتك. جربه، وشارك تجربتك مع الآخرين!
الآن اليك اقتراح ما رأيك ربطه مع نفس الجدول الذي استخدمته في م1 وبذلك نموذج لادخال البيانات واخر لعرضها 😉.
معاينة سكربت م2 المميز ولكن استخدمت التطبيق لعرض اخبار.

دمتم بخير

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

طريقة عرض بيانات من داخل جدول باستخدام Google Apps Script - م2

تمهيد

✨ مميزات التطبيق:

🛠️ خطوات تركيب التطبيق:

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

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

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

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

🎯 الفائدة العملية:

📝 الخاتمة:

علي الخضر

بلال أيوب