دراسة حالة · ٠٢

StudyBuddy

مساحة أكاديمية مترابطة تتمحور حول المقرر

الدور
مصمم المنتج والمطور الوحيد للواجهة الأمامية والخلفية
السنة
2026
المنصة
تطبيق ويب متجاوب (Flutter Web)

المشكلة

تجربة دراسية موزعة بين أدوات منفصلة

اقرأ التفاصيل كاملة

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

الفكرة

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

  • استراتيجية المنتج
  • تصميم UI/UX
  • Flutter Web
  • Express API
  • PostgreSQL وPrisma
  • المصادقة ودورة الحساب
  • تكامل الذكاء الاصطناعي
  • النشر
  1. ٠١

    الحساب والهوية

    يشمل المسار التسجيل بالبريد، ورموز تحقق حقيقية، والدخول عبر Google، واستعادة كلمة المرور، والتحقق من الجلسة، وحماية المسارات لتكوين دورة حساب متكاملة وليست واجهة دخول شكلية.

  2. ٠٢

    مساحة المقرر

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

  3. ٠٣

    ذكاء واعٍ بسياق المقرر

    يجمع الـBackend مواد المقرر المسموح بها وسياق المحادثة قبل الاتصال بـAnthropic، ولا تُحفظ الشروحات والملخصات والاختبارات والنماذج التدريبية إلا بعد موافقة المستخدم.

  4. ٠٤

    تجربة متجاوبة وشاملة

    تدعم الواجهة الجوال واللوحي وسطح المكتب، والعربية والإنجليزية، وRTL وLTR، والثيم الفاتح والداكن، والتباين المرتفع، وأحجام النص، وحالات التحميل والفراغ والخطأ وإعادة المحاولة.

جولة في المنتج

شاهد الرحلة الأكاديمية المترابطة وهي تعمل.

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

قرارات التصميم

ثلاثة قرارات ربطت بنية المنتج وموثوقية الحساب وتجربة الواجهة الشاملة.

٠١

تنظيم المنتج حول مساحة المقرر

ليش؟يقلل التنقل بين أقسام معزولة ويمنح كل إجراء سياقًا أكاديميًا واضحًا.

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

٠٢

بناء دورة حساب كاملة بدل شاشة دخول شكلية

ليش؟لا يصدر رمز دخول قبل التحقق من البريد؛ دورة حساب حقيقية لا شاشة دخول شكلية.

تم فصل إنشاء الحساب عن تفعيله، فلا يصدر رمز دخول للمستخدم الجديد قبل التحقق من بريده. تُجزأ كلمات المرور باستخدام bcrypt، وتُخزن رموز البريد بصيغة HMAC بدل النص الصريح، وتملك مدة صلاحية وحالة استهلاك وحدًا للمحاولات. يدعم النظام أيضًا ربط حساب Google بالمستخدم الموجود، واستعادة كلمة المرور برسالة عامة لا تكشف وجود الحساب، وحماية مسارات الواجهة والـAPI بصورة مستقلة. عالج هذا القرار دورة حياة الحساب كاملة بدل الاكتفاء بنموذج تسجيل محلي.

٠٣

جعل الاستجابة والتوطين وخيارات الوصول جزءًا من بنية الواجهة

ليش؟التنقل واللغة والاتجاه وخيارات العرض تُدار مركزيًا، فتبقى كل الشاشات متماسكة.

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

على الجوال

StudyBuddy عبر واجهات الويب والجوال

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

كيف انبنى

من الشاشة إلى قاعدة البيانات.

  1. Flutter Webواجهة متجاوبة ثنائية اللغة
  2. Express REST APIخدمات تطبيق محمية بالمصادقة
  3. Prisma ORMالوصول إلى البيانات العلائقية
  4. PostgreSQLحفظ البيانات الأكاديمية

التكاملاتGoogle OAuthإرسال البريدAnthropic

أدلة هندسية

  • تحقق بالبريد، ودخول Google، واستعادة كلمة المرور، وحماية مسارات الواجهة والـAPI.
  • حفظ بيانات المقررات العلائقية عبر Prisma وPostgreSQL بدل الحالة المؤقتة في الواجهة.
  • تُبنى طلبات الذكاء الاصطناعي في الـBackend من سياق مقرر مصرح به، ثم تُحفظ بعد تأكيد المستخدم.
  • حالات غير متزامنة قابلة لإعادة الاستخدام وواجهات متجاوبة RTL/LTR تغطي رحلة المنتج كاملة.

التحقق

  • تم اختبار إنشاء الحساب والتحقق بالبريد واستعادة كلمة المرور والدخول عبر Google وانتهاء الجلسة من البداية للنهاية.
  • تمت مراجعة التجاوب على سطح المكتب واللوحي والجوال بالعربية والإنجليزية.
  • يثبت النشر الفعلي ترابط الواجهة والـAPI وقاعدة البيانات ومسار البريد.

النتيجة

منتج جامعي متكامل يعمل من الواجهة إلى قاعدة البيانات

اقرأ التفاصيل كاملة

النتيجة هي تطبيق ويب منشور يجمع رحلة المستخدم الأكاديمية من إنشاء الحساب إلى إدارة المقررات والمحتوى والتعاون والتخطيط والتقدم والمساعدة الذكية. لا تعتمد الوحدات الأساسية على بيانات واجهة مؤقتة؛ بل ترتبط بواجهات API محمية ونماذج PostgreSQL مترابطة تحفظ بيانات المستخدم ونشاطه عبر الجلسات. يقدم المشروع دليلًا عمليًا على بناء دورة حساب حقيقية تشمل التحقق بالبريد، وتسجيل Google، واستعادة كلمة المرور، إلى جانب مساعد ذكي واعٍ بسياق المقرر، ومكتبة ملاحظات وموارد، ومجتمع للمقرر، ولقاءات وتقويم وتحليلات تقدم. توليت المشروع بصورة مستقلة من تحديد بنية المنتج وتصميم التجربة إلى تطوير Flutter Web وExpress وPrisma، وربط خدمات Google وAnthropic والبريد، وتحسين الاستجابة والتوطين وخيارات العرض، ثم نشر التجربة النهائية وتشغيلها.

القيود

  • مشروع تخرج فردي: تم تنفيذ تصميم المنتج والواجهة والـBackend ونموذج البيانات والنشر بصورة مستقلة.
  • تعتمد ميزات البريد والذكاء الاصطناعي على خدمات خارجية، لذلك تتطلب حالات واضحة للتعافي من الفشل وانتهاء الجلسة.
  • لا يدعي المشروع إجراء اختبار قابلية استخدام رسمي بمشاركين حقيقيين؛ ويعرض البورتفوليو التحقق المنفذ فقط.