Tutor AI: كيف تحولت فكرة صغيرة إلى أداة لتعلم البرمجة

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

ما لاحظته فعلياً

المشكلة الحقيقية لم تكن في عدم قدرة الطلاب على إيجاد الإجابات، بل كانت في أنهم:

• يحدقون في قطعة من الكود ولا يملكون أدنى فكرة عما يفعله كل سطر

• يقرؤون الكود مرة واحدة ويشعرون أنهم فهموه، لكنهم لا يستطيعون شرح كيفية ارتباط الأشياء ببعضها

• والأهم من ذلك، أنهم لا يعرفون ما هي المشكلة التي يحلها الكود فعلياً

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

ومن هنا بدأ Tutor.

https://tutor.artdance.net/

2. كيف بنيته، خطوة بخطوة

2.1 البدء بشارح كود بسيط

كانت الفكرة الأولية بسيطة جداً: ألصق بعض الكود، وبدلاً من الحصول على ملخص غامض، شاهد ما يفعله كل سطر فعلياً ولماذا كُتب بتلك الطريقة.

لذا كانت الميزة الأساسية الأولى لـ Tutor هيشرح سطر بسطر. فهو يكتشف تلقائياً أكثر من اثنتي عشرة لغة برمجة ويأتي مع أمثلة كلاسيكية لـ C/C++ — مثل فرز الفقاعات (bubble sort)، والقوائم المترابطة (linked lists)، والبحث الثنائي (binary search) — جاهزة للتحليل بنقرة واحدة.

2.2 الشرح لم يكن كافياً

فهم شيء ما لمرة واحدة لا يعني أنك تعلمته. لذا أضفت ثلاثة أشياء:

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

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

مع وجود هذه الميزات، بدأ الأمر أخيراً يبدو كأداة تعليمية.

2.3 جعل المعرفة تنمو من تلقاء نفسها

حتى مع وجود الشروحات، والأسئلة والأجوبة، والتمارين، ظل كل شيء يبدو ككتل معلومات منعزلة. ما أردته حقاً هو شعور بـالمعرفة التي تنمو عضوياً.

لذا بنيتKnowledge Canvas— مخطط معرفي تفاعلي وقابل للتوسع إلى ما لا نهاية. يقوم AI باستخراج المفاهيم الأساسية من الكود الخاص بك وتخطيطها كعُقد مترابطة. يمكنك "استكشاف" أي عُقدة لاكتشاف مفاهيم ذات صلة، أو "توسيعها" لتوليد مواضيع فرعية، أو طرح أسئلة مباشرة على عُقدة ما.

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

2.4 الكود يحتاج إلى التشغيل، لا القراءة فقط

جزء أساسي من فهم الكود هو رؤيته وهو يعمل. لذا قمت بدمج تنفيذ الكود عبر الإنترنت مع دعم لـ C، وC++، وPython، وJava، وأكثر من اثنتي عشرة لغة أخرى. يمكن للمستخدمين تشغيل الكود، وإدخال البيانات، ورؤية المخرجات مباشرة على الصفحة. يتم حفظ كل عملية تنفيذ، ويمكنك سؤال AI عن أي نتيجة تشغيل محددة.

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

2.5 لماذا كانت عملية البناء سلسة جداً

سارت العملية برمتها بسلاسة أكبر مما كنت أتوقع، ويرجع ذلك إلى حد كبير إلى أن منصة Enter تولت الكثير من المهام الشاقة.

• **مكونات واجهة المستخدم (UI components)**كانت جاهزة للاستخدام بمجرد تشغيلها.

• أساسيات الواجهة الخلفية (Backend)— مصادقة المستخدم، تخزين قاعدة البيانات، أمن مستوى الصف (row-level security) — جاءت جميعها من خلال تكامل Supabase المدمج.

• **تم توحيد الوصول إلى نماذج الذكاء الاصطناعي:**DeepSeek وClaude وGPT وGemini وDoubao — لا حاجة لطلب مفاتيح والتكيف مع كل واجهة برمجة تطبيقات (API) على حدة. فقط اكتب Edge Function وقم باستدعائها.

لذا، بدلاً من قضاء أسابيع في البنية التحتية، تمكنت من التركيز منذ اليوم الأول على ما يهم حقاً: هل الشروحات واضحة بما يكفي؟ هل ترتبط نقاط المعرفة ببعضها؟ هل يبدو مسار التعلم مناسباً؟

3. كيفية استخدام Tutor

3.1 ابدأ من أي مكان

• **هل لديك كود؟**الصقه واضغط على "Start Analysis"

• **لا يوجد كود؟**استخدم الذكاء الاصطناعي لإنشاء بعض الكود، ثم املأه في المحرر بنقرة واحدة

• **هل تتصفح فقط؟**اضغط على مثال مسبق الإعداد — وسترى تحليلاً كاملاً في ثانيتين

3.2 إنه مسار تعلم، وليس صفحة ميزات

بمجرد الدخول، يتبع المستخدمون مساراً طبيعياً:

1. تشغيل الكود للحصول على انطباع عما يفعله

2. قراءة التحليل سطراً بسطر

3. طرح أسئلة متابعة حول أي شيء غير واضح

4. القيام بتمارين عملية لتأكيد الفهم

5. فتح Knowledge Canvas والاستكشاف للخارج

كل خطوة — نتائج التنفيذ، المحادثات، درجات التمارين، خرائط المعرفة — تُحفظ تلقائياً. عُد في أي وقت وأكمل من حيث توقفت تماماً.

4. نظرة إلى الوراء: ما هو جوهر الأمر حقاً

بالنظر إلى الوراء، يبدو Tutor كأداة لشرح الكود في ظاهرها. لكن ما يفعله حقاً هو مساعدة الناس علىالبدء من قطعة كود وربط المعرفة المشتتة في شيء متكامل.

الصق الكود ← قم بتشغيله ← افهم سطراً بسطر ← اطرح أسئلة أعمق ← تدرب ← افتح Knowledge Canvas ← اتبع عقدة تلو الأخرى ← شاهد الخريطة وهي تنمو لتصبح خاصتك.

هذا ينجح لسببين. الأول، تصميم المنتج — الشرح، الأسئلة والأجوبة، الممارسة، واللوحة (canvas) ليست ميزات منعزلة؛ بل تشكل مسار تعلم مستمراً. والثاني، الأساس الذي يوفره Enter — واجهة المستخدم، قاعدة البيانات، نماذج الذكاء الاصطناعي، النشر — سمح لي بتكريس كل طاقتي لـ "هل تجربة التعلم جيدة حقاً؟" بدلاً من الصراع مع البنية التحتية.

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

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

ليس مجرد شرح للكود — بل مساعدتك على تنمية شبكتك المعرفية الخاصة