انشر نتيجة مدرستك مجاناً ( تحديث 2024) - ن1

المقدمة

• دون الخوض في اي تفاصيل من ناحية مشاكل التأمين في ن 4 سنستخدم script.google لتأمينه من اجل استخدامه مع اي بيانات حساسة 
• لسهولة دمجه وبساطة تصميمه في هذه المقالة سأشرح لك تامينه بالربط مع script.google

هذه الطريقة تعتبر حلاً وسيطًا ممتازًا:

• لا تتطلب خادمًا خلفيًا تقليديًا: يتم استضافة الكود وتنفيذه بواسطة Google نفسها.
• لا تكشف رابط جدول البيانات الأصلي أو ملف CSV كاملاً: بدلاً من ذلك، تقوم الواجهة الأمامية بالاتصال بنقطة نهاية (URL) يتم إنشاؤها بواسطة Google Apps Script.
• تسمح بفلترة البيانات على جانب الخادم (Google): يمكنك تحديد البيانات التي تريد إرسالها إلى المتصفح.

لماذا هذا الكود؟

يتميز هذا الكود بكونه:

• بسيط وواضح: يعتمد على HTML وCSS وJavaScript فقط، ولا يتطلب أي لغات برمجة معقدة من جانب الخادم.
• ديناميكي: يجلب البيانات مباشرة من جدول بيانات Google Sheet، مما يسهل تحديث النتائج دون الحاجة لتعديل الكود.
• مرن: يتعرف تلقائيًا على رؤوس الأعمدة، مما يقلل من الحاجة لتعديل الكود عند تغيير بنية بياناتك.
• سهل التخصيص: يمكنك تعديل التصميم والسلوك بسهولة ليناسب علامتك التجارية أو متطلباتك.

ما ستحتاجه قبل البدء

قبل أن نغوص في الكود، تأكد من أن لديك:

• جدول بيانات Google Sheet جاهز: يحتوي على بيانات الطلاب. يجب أن يكون العمود الأول مخصصًا لرقم الطالب (أو المعرّف الذي ستبحث عنه)، وأن تكون رؤوس الأعمدة في الصف الأول.
• الاكواد المستخدمة متوفرة على تطبيق المدونة اعلى الصفحة وستتاح هنا بعد مرور اسبوعين من النشر ان شاء الله
• تتوفر نسخة للبيع تتيح الاختيار بين اوراق العمل.

الخطوات لتنفيذ هذا الحل:

الجزء الأول: إعداد Google Apps Script (الخادم الخلفي الخفيف)

• افتح جدول بيانات Google الخاص بك.

• اذهب إلى الإضافات (Extensions) -> Apps Script. سيتم فتح محرر كود جديد.

• امسح أي كود موجود في الملف الافتراضي (Code.gs غالبًا) والصق الكود الموجود في ملف Code.gs

• احفظ الكود: انقر على أيقونة الحفظ (شكل قرص مرن).

• الحصول على معرف جدول البيانات (Spreadsheet ID):

  • عد إلى جدول بيانات Google الخاص بك.
  • انظر إلى رابط المتصفح: https://docs.google.com/spreadsheets/d/هنا_المعرف/edit#gid=0
  • انسخ الجزء الذي يمثل المعرف (سلسلة طويلة من الأحرف).
  • الصقه في كود Apps Script بدلاً من 'معرف_جدول_بياناتك_هنا'.

• نشر الكود كتطبيق ويب (Deploy as Web App):

  • في محرر Apps Script، انقر على Deploy (أيقونة النشر) ثم New deployment.
  • انقر على أيقونة الترس بجانب "Select type" واختر Web app.
  • الوصف (Description): اكتب وصفًا (مثل "نظام نتائج الطلاب").
  • Execute as: اختر Me (your email). هذا مهم جدًا للأمان، لأن الكود سيعمل بصلاحياتك أنت للوصول إلى الجدول الخاص بك، وليس بصلاحيات المستخدمين.
  • Who has access: اختر Anyone. هذا يسمح لكود JavaScript في صفحة الويب الخاصة بك بالوصول إليه بدون حاجة لتسجيل دخول المستخدم.
  • انقر على Deploy.
  • قد يطلب منك Google السماح للتطبيق بالوصول إلى بيانات Google Sheets الخاصة بك. اتبع التعليمات للموافقة.
  • بعد النشر، ستحصل على Web app URL. انسخ هذا الرابط؛ هذا هو الرابط الذي ستستخدمه في الكود HTML/JavaScript الخاص بك.
  • ملاحظة: إذا قمت بأي تغييرات على كود Apps Script، يجب عليك النشر مرة أخرى (اختر Manage deployments ثم Edit بجانب النشر الحالي، ثم Deploy) لكي تصبح التغييرات سارية المفعول.

الجزء الثاني: تعديل كود HTML/JavaScript (الواجهة الأمامية)

• الآن، سنقوم بتعديل دالة searchStudent() لجلب البيانات من رابط تطبيق الويب الخاص بـ Google Apps Script بدلاً من "ضع_رابط_تطبيق_الويب_هنا" داخل الملف result-s.html حافظ على علامتي التنصيص.

تضمين في موقعك

• يمكنك تضمين هذا الكود كصفحة HTML منفصلة، أو نسخ الأجزاء ذات الصلة (HTML للواجهة، CSS للأنماط، JavaScript للمنطق) ولصقها في ملفاتك الخاصة بموقعك الحالي.
• اذا كنت تستخدم مواقع جوجل ادرجها كرمز وليس تضمين انسخ جميع الاكواد ثم الصقها في مربع التضمين.
• بمعرفة هذه الأساسيات، أنت الآن جاهز لتركيب هذا النظام وتعديله ليصبح أداة قوية ومرنة لعرض بياناتك!

مزايا هذا النهج مقارنة بـ CSV العام:

• إخفاء رابط الجدول الأصلي: المستخدم في المتصفح لن يرى رابط Google Sheet الأصلي. سيرى فقط رابط تطبيق الويب الذي لا يكشف بنية الجدول أو يسمح بتنزيله كاملاً.
• فلترة البيانات على جانب الخادم (Google): كود Apps Script يقوم بالبحث عن الطالب وإرسال بياناته فقط إلى المتصفح. إذا حاول متطفل الوصول إلى رابط تطبيق الويب مباشرة، فلن يتمكن من جلب كل البيانات دفعة واحدة (إلا إذا قام بتجربة جميع أرقام الطلاب، ولكن هذا أصعب من تنزيل ملف واحد).
• أمان أفضل للبيانات غير الحساسة: بما أنك تستخدم Execute as: Me و Who has access: Anyone، فإن المستخدم لا يحتاج لتسجيل الدخول بحساب Google. البيانات لا تزال "عامة" بالنسبة لأي شخص يعرف رابط تطبيق الويب الخاص بك، لكنها لا تُعرض بالكامل.
• مرونة أكبر: يمكنك إضافة منطق أكثر تعقيدًا في Apps Script لاحقًا (مثل حسابات معقدة قبل إرسال النتائج، أو حتى تسجيل محاولات الوصول).
• سهولة النشر: لا يزال الأمر "بلا خادم" من وجهة نظرك كمتطور، حيث تتولى Google الاستضافة والإدارة.

قيود:

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

يمكنك تخصيص هذا الكود ليناسب احتياجاتك بطرق عديدة:

• تعديل التصميم (CSS)
• يمكنك تغيير الألوان، الخطوط، الأحجام، والمسافات لتتناسب مع تصميم موقعك.
• الألوان: غير قيم color و background-color في الأقسام المختلفة (body, .container, button, th, إلخ).
• الخطوط: غير font-family إلى الخط الذي تفضله (تذكر تضمين الخطوط المخصصة إذا لزم الأمر).
• الأحجام: غير قيم font-size أو padding أو margin للعناصر المختلفة.
• الشكل: جرب تعديل border-radius للحصول على حواف مربعة أو مستديرة أكثر.
• font-family: لتغيير نوع الخط المستخدم.
• padding: لزيادة المسافة الداخلية للعناصر، مما يجعلها تبدو أقل ازدحامًا.
• margin: لضبط المسافات الخارجية بين العناصر.
• border-radius: لجعل حواف العناصر أكثر دائرية.
• box-shadow: لإضافة ظل للعناصر مما يمنحها عمقًا.
• transition: لإضافة تأثيرات حركية سلسة عند التفاعل مع العناصر (مثل الأزرار أو صفوف الجدول).
• background-color: لتغيير لون الخلفية.
• color: لتغيير لون النص.
• font-size: لضبط حجم الخط.
• line-height: لضبط تباعد الأسطر داخل الفقرات.
• tr:nth-child(even): لتلوين الصفوف الزوجية في الجدول بلون مختلف، مما يسهل قراءته.
• tr:hover: لتغيير لون خلفية الصف عند مرور مؤشر الماوس فوقه، مما يعطي تجربة مستخدم أفضل.

• رسائل الخطأ والتنبيهات:

• يمكنك تعديل محتوى رسائل alert() أو resultDiv.innerHTML لتكون أكثر تحديدًا أو ودية.

نصائح إضافية

• اختبار البيانات: دائمًا اختبر الكود ببيانات مختلفة في جدول Google Sheet للتأكد من أنه يتعامل مع جميع السيناريوهات المتوقعة (مثل أرقام الطلاب غير الموجودة، أو البيانات الناقصة).
• الأداء للبيانات الكبيرة: إذا كان جدول بياناتك يحتوي على آلاف أو عشرات الآلاف من الصفوف، فإن تحميل ملف CSV بالكامل إلى المتصفح قد يؤثر على الأداء. في هذه الحالة، قد تحتاج إلى حلول أكثر تقدمًا (مثل استخدام Google Sheets API مع خادم خلفي) للتعامل مع البيانات بكفاءة أكبر.

دمتم بخير