نشر نتائج فردية لمادة او مسابقة او صف واحد

مقدمة

بشكل مجاني يمكنك نشر أي نتيجة لإدارة او مؤسسة او طلاب او موظفين او مسابقة باستخدام حسابك في جوجل من خلال (جدول البيانات و منشئ التطبيقات ) الخاص بجوجل كل ما عليك هو فقط تنفيذ خطوات الشرح التالية إن شاء الله وستكون بإذن الله بطريقة بسيطة لا تحتاج معها لخبرة في البرمجة كل ما عليك النسخ واللصق وتعديلات بسيطة.

رابط معاينة السكربت واستخدم ارقام جلوس من 101 حتى 110 لتجربته.
في مقالة سابقة ذكرنا طريقة لنشر النتائج وكانت تناسب مجموعات مختلفة او عدد من الصفوف الدراسية .
جميع الصور هنا تقريبية من أجل التوضيح.

مميزات الطريقة الجديدة .

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

المتطلبات

حساب في شركة جوجل Gmail
تنفيذ الخطوات بحرص ودقة واختبار كل مرحلة تنفذها لتستطيع التراجع عن اي خطأ يظهر معك.

المرحلة الاولى ( اعداد درجات الطلاب )

سجل الدخول الى جداول بيانات جوجل باستخدام حسابك في جوجل
انقر على + لإنشاء جدول بيانات جديد واعطيه اسم وسجل به بيانات الطلاب او المتسابقين ودرجاتهم.
ضع اسم مناسب لورقة العمل ( في الصورة اسمها 1).
مع مراعاة ان يكون العمود الاول هو معيار البحث لديك ( مفتاح اساسي لا تتكرر بياناته).
لا تستخدم دمج الخلايا نهائي واجعل الصف الاول لعناوين الاعمدة وبشكل مبسط .
في الصورة التالية مثال توضيحي فقط.

المرحلة الثانية ( تصميم السكربت )

عليك اتمام المرحلة السابقة ومراجعتها جيدا ولا تستعجل وعليك معرفة حرف كل مادة وهو العمود الذي يحتوي على المادة مثال العلوم يُرمز لها بحرف g كما في الصورة السابقة.
يفضل ان تجهز ورقة وقلم وتكتب حرف كل عمود لكل مادة او المجموع او التقديرات وغيره.
الان من نفس جدول البيانات انتقل الى قائمة الاضافات ومنها اختر برمجة التطبيقات.

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

حسب الصورة السابقة نفذ الاتي
المشار له برقم واحد اسم الاسكربت اعطيه اسم مناسب حتى تجده بسهولة مستقبلا اذا كنت تنوي إنشاء مشاريع اخرى.
المشار له برقم 2 انقر على الزر + واضف ملف html باسم index.
سنعود للأرقام 4 و 5 بعد الخطوة القادمة
مفترض لديك حاويتن اكواد او تعليمات برمجية باسم code , index .
ادخل كل ملف عمل منهما وامسح ما بداخله ( على اليسار يظهر المحتوى ) هي رقم 5 في الصورة قبل السابقة.
بعد ان مسحت محتوى كل ملف او حاوية من code - index عليك لصق محتوى جديد لكل حاوية من خلال الاتي فقط انسخ جميع الاكواد من هنا والصقها في كل حاوية بما يخصها :

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

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

function doGet() {
  return HtmlService.createTemplateFromFile('index')
    .evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function submitData(obj) {
  // Replace your google Sheet id below >>>>>>>>>>>>>>>>>>>>
  var spreadsheetId = "1tTQrkRVCN9FQTL6hh_pG1Pan52ImLuB38qjV3yAdg0w";
  var sheetName = "1";
  var ss = SpreadsheetApp.openById(spreadsheetId);
  var sheet = ss.getSheetByName(sheetName);
  var flag = 1;
  var lastRow = sheet.getLastRow();

  for (var i = 1; i <= lastRow; i++) {
    var currentId = sheet.getRange(i, 1).getValue();

    if (currentId == obj) {
      flag = 0;
	  // Replace your google Sheet Heading below >>>>>>>>>>>>>>>>>>>>
      var columnB = sheet.getRange(i, 2).getValue();
      var columnC= sheet.getRange(i, 3).getValue();
      var columnD = sheet.getRange(i, 4).getValue();
      var columnE = sheet.getRange(i, 5).getValue();
      var columnF = sheet.getRange(i, 6).getValue();
      var columnG = sheet.getRange(i, 7).getValue(); 
      var cA = sheet.getRange(1, 1).getValue();
      var cB = sheet.getRange(1, 2).getValue();
      var cC= sheet.getRange(1, 3).getValue();
      var cD = sheet.getRange(1, 4).getValue();
      var cE = sheet.getRange(1, 5).getValue();
      var cF = sheet.getRange(1, 6).getValue();
      var cG = sheet.getRange(1, 7).getValue();

     

      var resultHtml = "<table><tr><th colspan=2><center>نتيجتك</center></th></tr><tr><td>" + cA + "</td><td>"
       + obj + "</td></tr><tr><td>"+ cB +"</td><td>"
       + columnB + "</td></tr><tr><td>"+cC+"</td><td>"
       + columnC + "</td></tr><tr><td>"+cD+"</td><td>"
       + columnD + "</td></tr><tr><td>"+cE+"</td><td>"
       + columnE+ "</td></tr><tr><td>"+cF+"</td><td>"
       + columnF+ "</td></tr><tr><td>"+cG+"</td><td>"
       + columnG + "</td></tr></table>";

      return resultHtml;


    }
    
  }

  if (flag == 1) {
    var notFoundMessage = "<font color=red ><b>لا بيانات لهذا السجل</font>";
    return notFoundMessage;
  }
  
}

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

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

<!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>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f7f7f7;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .container {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      width: 300px;
      text-align: center;
    }

    #inputId {
      width: calc(100% - 20px);
      padding: 10px;
      margin: 10px 0;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

    #submitButton {
      width: 100%;
      background-color: #4caf50;
      color: #fff;
      padding: 10px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      transition: background-color 0.3s;
    }

    #submitButton:hover {
      background-color: #45a049;
    }

    #resultContainer {
      margin-top: 20px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }

    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

  <div class="container">
<!--<img src="#" width="200"  height="200">-->
    <h2>اسم الامتحان الخاص بك</h2>
  <!-- اسم معيار البحث الخاص بك -->
    <input type="text" id="inputId" placeholder="اكتب سجلك هنا" required>
    <button id="submitButton" onclick="fetchData()">بحث</button>
    <div id="resultContainer"></div>
    <p> هذه نتيجة استرشادية وليست مستند رسمي © جميع الحقوق محفوظة<br>
  </div>

  <script>
    function fetchData() {
      var studentId = document.getElementById('inputId').value;

      google.script.run
        .withSuccessHandler(displayResult)
        .submitData(studentId);
    }

    function displayResult(result) {
      document.getElementById('resultContainer').innerHTML = result;
    }
  </script>


 

</body>
</html>

الان عليك حفظ كل ما سبق بنقر زر الحفظ كما في الصورة ثم ننتقل لنشر الاسكربت فى المرحلة الثالثة

المرحلة الثالثة ( تعديل السكربت)

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

التعديل في code

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

('1tTQrkRVCN9FQTL6hh_pG1Pan52ImLuB38qjV3yAdg0w')

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

التعديل في index

السطر 6 اكتب عنوان مختصر لصفحتك.
السطر 78 اكتب عنوان النتيجة او المسابقة الخاص بك.
السطر 80 اكتب مفتاح البحث الخاص بك مثلا رقم الجلوس - السجل - الكود - رقم المتدرب -الرقم القومي .. وهكذا ولا تنسى ان معيار البحث يشترط فيه عدم التكرار.
انقر حفظ.
بعد ان قمت بحفظ الخطوات السابقة انقر زر نشر ومنه نشر جديد.

حدد من النافذة التى ظهرت امامك اختيار نوع التطبيق واجعله تطبيق ويب.

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

إن ظهرخطأ تعود الى الحاوية التي عدلت عليها وتتراجع عن التعديل ( يمكن ضغط ctrl+z ).

فيديو الشرح

لا يتوفر فيديو في حالة الحاجة له سيتم اعداده إن شاء الله

اضافة صورة

اذا رغبت في نشر صورة للمسابقة او النتيجة ستقوم بالاتي:

يشترط ان تكون الصورة متوفرة على الانترنت ولديك الرابط الخاص بالصورة.
انتقل الى السطر 77 في الحاوية index واحذف من اوله --!> ومن اخره <-- التزم بذلك فقط.
ستجد رمز # استبدله برابط الصورة وانقر حفظ.
ولا تنسى اي تعديل لن يظهر للآخرين الا بعد اعادة نشره ومن جديد برابط جديد.
ايضا في التصاريح لابد ان تجعله لاي شخص ( سبق ذكر ذلك).

انقاص عدد الصفوف ( جاري التعديل)

الخلاصة

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

بالتوفيق ودمتم بخير

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