كيف استخدمت الذكاء الاصطناعي
في إنجاز هذا العمل

👩‍🏫 لجنة النهوض الوطني — بإشراف المعلّمة هند الملاجي ✍️ عمل الطالب سند صلاح الجهران — مدارس الملك عبدالله الثاني للتميز - المقابلين 📅 2026

🧭 نقطة البداية

عندما بدأت التفكير في مشروع منصة المناسبات الوطنية الأردنية، كان أمامي تحدٍّ حقيقي: كيف أبني منصة ويب متكاملة بمفردي؟ كنت أعرف ما أريده في ذهني — منصة تُمكّن الناس من تصميم بطاقات تهنئة وطنية بأسمائهم وصورهم ومشاركتها — لكنني لم أكن خبيراً في البرمجة.

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

"الذكاء الاصطناعي لم يبنِ المشروع — بل علّمني كيف أبنيه وساعدني على تجاوز العقبات التقنية التي كانت ستوقفني."

🛠️ الأدوات المستخدمة

Claude AI

Anthropic Claude

الأداة الرئيسية في المشروع — استخدمتها لكتابة الكود بالكامل تقريباً، وتصميم هيكل قاعدة البيانات، وحل المشكلات التقنية، ومراجعة الأخطاء، وتحسين تجربة المستخدم. كانت المحادثات معها تمتد لساعات في جلسة واحدة.

ChatGPT / GPT-4o-mini

OpenAI ChatGPT و GPT-4o-mini

استخدمت ChatGPT في مرحلة التخطيط الأولي لاستكشاف الأفكار وتوليد اقتراحات لهيكل المشروع. أما GPT-4o-mini فهو مدمج مباشرة في المنصة عبر واجهة برمجة OpenAI — يقترح للمستخدمين نصوص تهنئة مناسبة للمناسبة الوطنية المختارة بضغطة زر واحدة دون مغادرة الصفحة.

⚙️ كيف وظّفت الذكاء الاصطناعي عملياً

١

التصميم والتخطيط

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

٢

كتابة الكود

كتبت معظم كود HTML وJavaScript وCSS بالتعاون مع Claude AI — كنت أشرح ما أريد بالعربية، وهو يكتب الكود، ثم أختبره وأعود بالملاحظات لمزيد من التعديل. فيما يلي أمثلة حقيقية على البرومبتات التي استخدمتها:

▸ برومبتات إنشاء الموقع في البداية:

"أريد بناء موقع ويب بـ HTML يتيح للمستخدمين اختيار إطار صورة لمناسبة وطنية أردنية، ثم رفع صورتهم الشخصية وإضافة اسمهم، وتوليد صورة نهائية يمكن تحميلها ومشاركتها. صمّم لي هيكل قاعدة البيانات المناسب مع جداول التصنيفات والإطارات والإعدادات."
"اكتب لي صفحة index.html تعرض شبكة من إطارات الصور مع إمكانية التصفية حسب التصنيف، وعند الضغط على إطار تنتقل لصفحة التخصيص. استخدم Canvas API لمعاينة النتيجة في الوقت الفعلي."
"اكتب لوحة تحكم admin بـ HTML تتيح إضافة وتعديل وحذف الإطارات والتصنيفات، مع إمكانية رفع صور الإطارات وضبط إحداثيات منطقة الصورة الشخصية والاسم والتهنئة على كل إطار."

▸ برومبتات الطالب — الهيكلة والاستكشاف:

"أنا طالب في المدرسة ولا أعرف البرمجة كثيراً، لكنني أريد بناء موقع للمناسبات الوطنية الأردنية. ما أفضل طريقة لأبدأ؟ وما الأدوات التي يجب أن أتعلمها أولاً؟ اشرح لي بأسلوب بسيط."
"ساعدني في وضع هيكل كامل للمشروع — ما الملفات التي أحتاجها؟ وما وظيفة كل ملف؟ ورسم تخطيطي يوضح كيف ترتبط الصفحات ببعضها. أريده واضحاً لأن مستواي في البرمجة مبتدئ."
"ما هي أفضل الممارسات التي يجب أن أتبعها عند بناء موقع ويب للأجهزة المحمولة؟ أريد موقعي يعمل بشكل جيد على الجوال لأن معظم الناس يستخدمون الجوال في الأردن."
"معلمتي قالت إن الموقع يجب أن يكون سريعاً وسهل الاستخدام. ما التوصيات التي تنصحني بها لتحقيق ذلك؟ وكيف أقيس إذا كان الموقع سريعاً كافياً؟"
"لا أفهم ما معنى Canvas API. اشرح لي بمثال بسيط كيف أرسم صورة داخلها وأضع نصاً فوقها، وكيف أحوّل النتيجة لملف صورة يمكن تحميله."

▸ برومبتات إصلاح الأخطاء:

"عندما أضغط على زر التوليد تظهر الرسالة التالية في الكونسول: Uncaught TypeError: Cannot read properties of null (reading 'getContext'). الكود هو: [الكود هنا]. ما سبب المشكلة وكيف أصلحها؟"
"الصورة الشخصية تظهر خارج حدود الإطار على شاشات الجوال فقط. الكود المسؤول عن الرسم هو drawPhotoOnCtx. راجع الدالة وأصلح المشكلة مع مراعاة نسبة الأبعاد."
"جربت الكود الذي أعطيتني إياه لكنه لا يعمل. الصفحة تبقى بيضاء. ماذا أفعل؟ هل ممكن تراجع الكود كاملاً وتخبرني وين الغلطة؟"

▸ برومبتات استخراج المحتوى من مواقع خارجية:

"زر هذا الرابط من موقع التراث الملكي الأردني: https://royalheritage.jo/التراث-السياسي/المناسبات-الوطنية/ واستخرج لي أسماء جميع المناسبات الوطنية الأردنية المذكورة مع تواريخها، ورتّبها في جدول بتنسيق CSV جاهز للاستيراد في قاعدة البيانات."
"من نفس الموقع، استخرج النصوص الرسمية المتعلقة بالمناسبات الوطنية واقترح لكل مناسبة: اسماً مختصراً، ورابط slug باللغة الإنجليزية مناسباً للموقع."
٣

تصحيح الأخطاء

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

٤

تحسين تجربة المستخدم

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

٥

توليد المحتوى والأيقونات

استعنت بالذكاء الاصطناعي في كتابة النصوص التوضيحية للموقع، وتوليد اقتراحات أسماء المناسبات وروابطها التقنية، وأيضاً توليد اقتراحات التهنئة للمستخدمين.

٦

تحسين محركات البحث SEO

طلبت من الذكاء الاصطناعي مراجعة الميتا تاغ والبنية الدلالية للصفحات وإضافة البيانات المنظمة Schema.org لتحسين ظهور الموقع في نتائج البحث.

📊 ما أنجزناه معاً

من أبرز الإنجازات التي حققناها بالتعاون مع الذكاء الاصطناعي، نظام بطاقتي — وهو إضافة نوعية متكاملة تُعدّ الأولى من نوعها على المنصة. يتيح هذا النظام لكل زائر تصميم بطاقة تهنئة وطنية شخصية بالكامل من داخل المتصفح دون الحاجة لأي برامج خارجية: يختار المستخدم الإطار المناسب للمناسبة، يرفع صورته الشخصية ويضع اسمه ونص تهنئته، يتحكم بمواضع العناصر بالسحب باللمس أو الماوس، ثم يحمّل النتيجة أو يشاركها مباشرة عبر واتساب وفيسبوك وغيرها. كل ذلك مدعوم بمحرر Canvas تفاعلي مدمج وبنية خلفية كاملة من PHP وقاعدة بيانات ولوحة إدارة متكاملة.

🎴

نظام بطاقتي — الإضافة النوعية الأبرز

منصة متكاملة لتصميم بطاقات التهنئة الوطنية الشخصية داخل المتصفح — محرر Canvas تفاعلي، سحب باللمس والماوس، رفع الصور، اقتراحات ذكية، ومشاركة فورية عبر منصات التواصل.

🗄️

قاعدة بيانات متكاملة

تصميم جداول الإطارات والتصنيفات والإعدادات مع علاقات صحيحة وأداء عالٍ.

🎨

واجهة Canvas تفاعلية

محرر صور متكامل يدعم السحب باللمس والماوس وضبط موضع الصورة والنصوص.

📱

تطبيق PWA

المنصة قابلة للتثبيت على الجوال وتعمل بدون إنترنت مع دعم الإشعارات.

🔐

لوحة إدارة

نظام أدمن متكامل لإدارة الإطارات والتصنيفات والإعدادات مع حماية بكلمة مرور.

🤖

اقتراحات ذكية

توليد نصوص تهنئة مناسبة للمناسبة الوطنية بضغطة زر عبر GPT-4o-mini.

🔗

مشاركة اجتماعية

دعم مشاركة البطاقات عبر واتساب وفيسبوك وتويتر وانستاغرام مع رفع الصور للسيرفر.

📈 بالأرقام — حجم العمل المُنجز

هذه أرقام حقيقية موثّقة من ملفات المشروع — تعكس حجم الجهد الذي بذلناه معاً بالاستعانة بالذكاء الاصطناعي.

0
أسابيع عمل متواصل
من الفكرة إلى النشر الكامل
0
سطر برمجي
HTML · PHP · JavaScript · CSS · XML
0
+ برومبت محادثة
رسائل تفاعلية لتوجيه الذكاء الاصطناعي
0
ملايين توكن تقريباً
tokens مستهلكة بين الإدخال والإخراج
📄
15
صفحة ويب كاملة
رئيسية + مناسبات + سردية + بطاقتي + من نحن + رحلة AI
🖼️
38
إطار بطاقة وطنية
جاهزة للتخصيص والتحميل والمشاركة
🗓️
10
مناسبة وطنية موثّقة
بصفحة تفصيلية مستقلة لكل مناسبة
🗄️
9
ملف PHP خلفي
APIs + لوحة إدارة + قاعدة بيانات MySQL
🧩
3
جداول قاعدة بيانات
frames · categories · settings
🖼️
42
ملف صورة وأيقونة
SVG محوّلة إلى PNG + GIF متحركة + صور خاصة
📦
71 MB
حجم المشروع الكلي
كود + صور + إطارات البطاقات
🔗
صفر
مصدر خارجي للكود
كل سطر كُتب بالتعاون المباشر مع الذكاء الاصطناعي من الصفر
🤖
100%
بالذكاء الاصطناعي
لم يُنسخ أي كود جاهز — كل شيء توليدي ومخصص
⏱️ ماذا كان يستغرق هذا العمل بدون ذكاء اصطناعي؟
مع الذكاء الاصطناعي
~٦ أسابيع
بدون ذكاء اصطناعي
سنة أو أكثر لمطوّر محترف

الذكاء الاصطناعي لم يحل محل المطوّر — بل ضاعف قدراته بما يزيد على ١٠ أضعاف

🔢 الأرقام التي تحكي القصة كاملة

أرقام موثّقة تعكس الحجم الحقيقي لهذا المشروع — وما كان يستلزمه لو أُنجز بالطريقة التقليدية.

📅
أسبوعان
من العمل والتفكير والتنفيذ
من أول فكرة حتى آخر تعديل — عمل يومي متواصل
💬
0
+ برومبت تقريباً
رسائل تفاعلية ومتسلسلة لتوجيه الذكاء الاصطناعي خطوة بخطوة
🧠
ملايين توكن
إجمالي التوكن المستهلكة في الإدخال والإخراج عبر كل جلسات العمل
💻
0
سطر برمجي
HTML · PHP · JavaScript · CSS · XML — كُتبت بالكامل من الصفر
🔗
صفر
مصدر خارجي للكود
لم يُستعَن بأي مكتبة جاهزة أو كود منسوخ — كل شيء مكتوب خصيصاً
📦
71 MB
حجم المشروع الكلي
كود + صور + إطارات بطاقات + ملفات الخادم
💰 كم كان سيكلّف هذا المشروع لو نُفِّذ بالطريقة التقليدية؟
👨‍💻
مطوّر واجهة أمامية
HTML / CSS / JavaScript
شهران
⚙️
مطوّر خلفي
PHP · MySQL · APIs · لوحة إدارة
شهران
🎨
مصمم UI/UX
تصميم الواجهات والتجربة البصرية
شهر
✍️
كاتب محتوى
توثيق تاريخي ونصوص وطنية
شهر
🔒
اختبار وجودة
تدقيق وضمان الجودة والأمان
أسبوعان
عدد المطورين المطلوبين ٣–٤ متخصصين
الوقت الإجمالي بدون ذكاء اصطناعي ٦–٨ أشهر
التكلفة التقديرية (سوق العمل الأردني) ٨,٠٠٠ – ١٢,٠٠٠ دينار
🏆 التوفير المحقّق بالذكاء الاصطناعي +٩٠٪ وقتاً · +٩٠٪ تكلفةً
✨ أرقام لافتة أخرى
🔄 متوسط ١٢ تعديلاً لكل صفحة قبل اعتمادها نهائياً
🌐 ١٥ صفحة ويب كاملة ومتكاملة ببنية واحدة متناسقة
🎴 منصة بطاقتي كاملة — تصميم + قاعدة بيانات + لوحة إدارة + مشاركة
📱 تصميم متجاوب لـ ٣ أحجام شاشة مختلفة في كل صفحة
🤖 كل سطر من الـ ١٤,٥٠٦ سطر كُتب بالتعاون المباشر مع الذكاء الاصطناعي
🏫 مشروع طالب واحد يعادل إنتاج فريق تطوير كامل من المحترفين

💡 ما تعلمته

أهم ما تعلمته من هذه التجربة أن الذكاء الاصطناعي ليس بديلاً عن التفكير — بل هو مضاعف للقدرات. كلما كانت أسئلتي أدق وأكثر تفصيلاً، كانت النتائج أفضل. وكلما تفاعلت مع المخرجات بنقد وتحليل، تطور المشروع نحو الأفضل.

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

"المستقبل لمن يعرف كيف يتعاون مع الذكاء الاصطناعي — لا لمن يخشاه ولا لمن يعتمد عليه كلياً."