لخّصلي
خدمة تلخيص النصوص العربية أونلاين،قم بتلخيص نصوصك بضغطة واحدة من خلال هذه الخدمة
نتيجة التلخيص (100%) تلخيص بواسطة الذكاء الاصطناعي
اقرأ النص التالي جيداا وخد وقتك كامل في الانشاء والتفكير وحاول الاستعانه بالمساعده من المصادر المذكور خصوصا في الاشياء التي لا يمكنك التاكد منها بشكل كامل مثل ممحاه راحه اليد وهذا النص :
MASTER PROMPT — ShoaibBoard
Build a Premium, Production-Oriented Interactive Smart Board for Education
أريدك أن تعمل كفريق تطوير برمجيات متكامل يضم:
- Senior Software Architect
- Senior Frontend/Canvas Engineer
- Python Desktop Application Engineer
- Touchscreen and Stylus Interaction Specialist
- Digital Ink and Geometry Specialist
- GIS and Educational Cartography Specialist
- UI/UX Designer
- Performance Optimization Engineer
- Accessibility Specialist
- QA and Automated Testing Engineer
مهمتك ليست كتابة نموذج توضيحي أو مشروع مدرسي بسيط، بل إنشاء تطبيق سبورة تعليمية احترافي باسم ShoaibBoard، مخصص للشرح في السناتر التعليمية والفصول وعلى الشاشات التفاعلية الكبيرة، مع التركيز على الاستخدام الحقيقي بالقلم واللمس، خصوصًا شاشات Promethean.
أريد تطبيقًا حديثًا وسريعًا وقابلًا للتطوير، يتفوق في تجربة الاستخدام والتنظيم وسلاسة الرسم على تطبيقات السبورة التقليدية، ويستفيد من أفضل الأفكار الهندسية الموجودة في التطبيقات الاحترافية، دون تقليد واجهة أي منتج بشكل حرفي ودون انتهاك تراخيص الكود.
1. قاعدة الأولوية الأساسية: اقرأ المتطلبات من الأحدث إلى الأقدم
قبل البدء في البرمجة، تعامل مع ترتيب هذا المستند باعتباره ترتيب الأولوية.
القاعدة الإلزامية:
- أحدث متطلب واضح له الأولوية على أي متطلب أقدم يتعارض معه.
- إذا تكرر المتطلب نفسه بصياغة مختلفة، احتفظ بأحدث صياغة واجعلها المرجع الأساسي.
- إذا كان هناك طلب حديث يضيف ميزة إلى طلب سابق دون أن يلغيه، فاحتفظ بالاثنين.
- لا تحذف ميزة مهمة لمجرد أن تنفيذها صعب.
- لا تستبدل ميزة مطلوبة بميزة أخرى أسهل دون التصريح بذلك.
- لا تعتبر مجرد إنشاء زر أو نافذة دليلًا على اكتمال الوظيفة التي يمثلها.
- لا تغيّر المتطلبات بصمت. إذا وجدت تعارضًا حقيقيًا، سجله في جدول واضح، وطبّق أحدث طلب صريح بوصفه الأولوية.
- عندما تكون هناك عدة طرق ممكنة للتنفيذ، اختر الطريقة الأكثر ملاءمة للأداء والاعتمادية وسهولة الاستخدام على جهاز إمكانياته محدودة نسبيًا.
- لا تسألني عن قرارات يمكن اتخاذها هندسيًا بصورة منطقية. اتخذ قرارًا مناسبًا، وثّق السبب، وابدأ التنفيذ.
- لا تتوقف عند كتابة الخطة. المطلوب هو التطبيق والكود والملفات الفعلية والاختبارات.
أنشئ في البداية جدولًا داخليًا لمراجعة المتطلبات يتضمن:
- المتطلب.
- أحدث صياغة له.
- الأولوية.
- طريقة التنفيذ.
- طريقة التحقق من عمله.
استخدم الجدول لضمان عدم نسيان أي شيء، ثم ابدأ البرمجة مباشرة.
2. أهم المتطلبات الحديثة: التفاعل مع شاشة Promethean
هذه من أخطر وأهم نقاط المشروع؛ لأنها تتعلق بالاستخدام الفعلي في الفصل.
أستخدم شاشة تفاعلية من نوع Promethean، وأريد التعامل معها بالقلم واليد كما لو كنت أكتب على سبورة حقيقية.
2.1 توزيع مسؤوليات الإدخال
صمم نظام إدخال مستقلًا وقابلًا للتهيئة بحيث يميز، قدر الإمكان ووفق المعلومات التي يوفرها نظام التشغيل والشاشة:
- القلم الإلكتروني.
- الماوس.
- اللمس بإصبع واحد.
- اللمس بأصبعين أو أكثر.
- مساحة التلامس الكبيرة التي قد تدل على راحة اليد أو ظهر اليد، عندما تكون معلوماتها متاحة فعلًا.
المطلوب أن يكون السلوك الافتراضي كما يلي:
القلم الإلكتروني:
- يكتب ويرسم بسرعة عالية ودون تأخير ملحوظ.
- يتحكم في القلم والممحاة وفق طريقة التشغيل المختارة.
- لا تتحول كل لمسة من القلم إلى أمر لمس أو تحريك عشوائي.
- لا يحدث انقطاع متكرر في الخط نتيجة انتقال أحداث الإدخال بين الأدوات.
الماوس:
- يُستخدم للرسم والتحكم في الأدوات والعناصر.
- يكون سلوكه ثابتًا ومفهومًا، ولا يتحول تحريكه العادي إلى تكبير وتصغير غير مقصود.
- يدعم النقر والسحب وتحديد العناصر.
اللمس بالأصابع:
- يُستخدم للتحريك والتكبير والتصغير والإيماءات عندما يكون نمط التحريك والتكبير مفعّلًا.
- لا يمسح الكتابة تلقائيًا.
- لا يحذف العناصر لمجرد وضع اليد على الشاشة.
- يدعم السحب بإصبع واحد والتكبير أو التصغير بإصبعين.
- يُمنع تداخل اللمس مع الرسم بطريقة تؤدي إلى خطوط عشوائية.
2.2 منع مشكلة المسح التلقائي المستمر
ظهرت مشكلة في تنفيذ سابق جعلت التطبيق يعتبر التلامس كله مسحًا، ما جعل السبورة غير قابلة للاستخدام.
يُمنع تكرار هذه المشكلة تمامًا في التصميم:
- لا تعتبر أي Pointer أو Touch حدث ممحاة لمجرد أنه Touch.
- لا تجعل حجم التلامس الكبير وحده سببًا كافيًا لمسح مساحة عشوائية من اللوحة.
- لا تجعل اللمس العادي أو تحريك السبورة بالإصبع يمسح الكتابة.
- لا تُدخل قاعدة لمسح تلقائي تعمل دائمًا دون تحقق من نوع الإدخال.
- لا تُشغّل الممحاة التجريبية على أي لمس عام.
- افصل بوضوح بين منطق الرسم، ومنطق التحريك والتكبير، ومنطق المسح.
- اجعل الانتقال بين الأنماط متوقعًا، مع عدم فقدان الخطوط أو تنفيذ أوامر مزدوجة.
2.3 مسح راحة اليد أو ظهر اليد تلقائيًا
أريد أسلوبًا قريبًا من استخدام السبورة الحقيقية: أكتب بالقلم، وأريد إمكان استخدام الجزء المناسب من اليد في المسح دون الحاجة دائمًا إلى تبديل الأداة.
لكن يجب تنفيذ ذلك بحذر شديد:
- افحص ما إذا كانت المنظومة تعرض فعلًا بيانات موثوقة عن نوع القلم ونوع التلامس ومساحة التلامس.
- استخدم خصائص مثل pointer type وcontact geometry وغيرها إذا كانت متاحة ومدعومة في البيئة المستهدفة.
- لا تدّعِ القدرة على معرفة «ظهر اليد» تحديدًا إذا كان النظام لا يقدم بيانات تسمح بتمييزه.
- إذا تعذر تمييز ظهر اليد بصورة موثوقة، طبّق بديلًا آمنًا قابلًا للضبط، واجعل اكتشاف المسح التلقائي معطلًا افتراضيًا حتى يمكن التحقق منه.
- لا تجعل ميزة المسح التجريبية تتغلب على اللمس العادي.
- اجعل هناك طريقة واضحة لإيقاف الميزة من الإعدادات.
- وفّر تشخيصًا يعرض معلومات الإدخال التي تصل فعليًا من الشاشة، حتى يمكن ضبط السلوك على الجهاز الحقيقي.
شرط النجاح: وضع راحة اليد على الشاشة أثناء التحريك العادي لا يجب أن يمسح الكتابة بصورة عشوائية، واستخدام أصابع اليد للتكبير والتحريك يجب ألا يتسبب في محو المحتوى.
3. الكتابة والرسم: الأولوية القصوى للأداء
أريد كتابة ناعمة وسريعة، بحيث يتبع الخط سنّ القلم بدقة قدر الإمكان.
3.1 محرك رسم احترافي
أنشئ محرك Digital Ink حقيقيًا، وليس مجموعة من أحداث الرسم البسيطة.
يجب أن يدعم:
- جمع نقاط القلم بتتابع زمني دقيق.
- تخزين الإحداثيات ووقت كل نقطة.
- تجميع أحداث الإدخال المتقاربة عند الحاجة.
- تنعيم الخطوط دون إفساد المسار الأصلي.
- رسمًا متصلًا رغم اختلاف معدل وصول الأحداث.
- استخدام quadratic أو cubic curves عند ملاءمتها.
- تخفيف الاهتزاز دون جعل القلم متأخرًا عن اليد.
- الحفاظ على التفاصيل عند الكتابة السريعة.
- إنهاء الخط دون نتوءات أو اختفاء آخر جزء منه.
- منع الفجوات بين النقاط عند سرعة الحركة.
- دعم التكبير والتصغير مع بقاء سماكة القلم في الصورة المرئية متناسقة وفق سياسة واضحة.
- إمكانية إضافة دعم ضغط القلم إذا كان متاحًا بالفعل.
لا تستخدم تنعيمًا مبالغًا فيه يجعل الكتابة تتأخر. يجب تحقيق التوازن بين السلاسة والدقة والزمن الفعلي.
3.2 مؤشر القلم
أريد تغيير شكل مؤشر القلم إلى نجمة صغيرة جدًا تظهر عند نقطة الكتابة الفعلية.
الشروط:
- صغيرة وغير مزعجة.
- قريبة جدًا من موضع سن القلم.
- لا تتحول إلى شكل كبير يغطي الكتابة.
- تختفي أو تتغير بطريقة مناسبة عندما لا يكون القلم فوق مساحة الرسم.
- لا تؤدي إلى إبطاء الرسم.
- لا تترك أثرًا داخل المحتوى.
- لا تعرض أيقونة اليد الكبيرة التي تظهر أثناء التكبير إذا كان بالإمكان التحكم فيها من التطبيق.
3.3 الألوان الأربعة
اعرض أربعة ألوان دائرية فوق شريط الأدوات، بحيث تكون مثبتة إلى حافته وملاصقة له بصريًا، ولكنها ليست داخل مساحة الشريط الرئيسية.
ترتيبها الإلزامي:
- أسود.
- أحمر.
- أزرق.
- أخضر.
عند النقر على أي لون:
- يتفعل القلم تلقائيًا.
- يصبح اللون المحدد واضحًا بصريًا.
- يُستخدم اللون مباشرة في الكتابة التالية.
- لا يحتاج المستخدم إلى فتح نافذة إضافية.
- تعمل الألوان بالقلم والماوس واللمس المدعوم.
اجعل ألوان العلامات واضحة على الورق الأبيض والأسود. إذا كان من الضروري عرض تمييز إضافي للون المحدد، فليكن أنيقًا وصغيرًا.
3.4 خصائص القلم
أضف عند فتح إعدادات القلم:
- اختيار اللون.
- ضبط السمك.
- التحكم في درجة الشفافية إذا كان ذلك مناسبًا.
- قلم عادي.
- قلم تحديد أو هايلايتر.
- خصائص إضافية قابلة للتطوير.
- حفظ الإعدادات المختارة.
- عدم فتح نوافذ ثقيلة أو إبطاء الكتابة.
لا تملأ الواجهة بالأدوات دفعة واحدة؛ اجعل الخصائص المتقدمة في قوائم فرعية منظمة.
4. الممحاة بكل أوضاعها
أريد قائمة فرعية للممحاة تضم:
- Stroke Eraser: حذف خط أو عنصر كتابة كامل عند تحديده أو لمسه.
- Pixel Eraser: مسح جزء من محتوى الخط عند المرور فوقه، مع احترام حدود المسح.
- Lasso Eraser: تحديد منطقة حرة ثم حذف المحتوى الواقع داخلها.
- Clear Page: مسح محتوى الصفحة الحالية بعد تأكيد مناسب.
- Palm Erase: نمط اختياري للمسح التلقائي عند توفر بيانات موثوقة، وفق الشروط السابقة.
التفاصيل:
- اجعل تغيير نوع الممحاة واضحًا.
- أتح ضبط حجم ممحاة البكسل.
- لا تجعل ممحاة الخطوط تمسح عناصر بعيدة أو غير محددة.
- لا تجعل تحديد الممحاة الحرة يتحول إلى تحديد العناصر المراد الاحتفاظ بها بدل حذفها.
- اجعل مسح الصفحة عملية منفصلة عن حذف صفحة كاملة.
- اعرض تأكيدًا للعمليات المدمرة التي يصعب التراجع عنها.
- ادعم Undo بعد المسح.
- حافظ على الأداء عندما تحتوي اللوحة على آلاف الخطوط والنقاط.
5. التحريك والتكبير في زر واحد
أريد أداة واحدة باسم Pan & Zoom أو ما يعادلها، تجمع التحريك والتكبير والتصغير.
السلوك:
- سحب مناسب يحرك مساحة العمل.
- Pinch بإصبعين يكبر ويصغر.
- تغيير مستوى التكبير لا يفقد الإحداثيات.
- لا تتحرك الأدوات الثابتة مع المحتوى.
- لا تختفي الخطوط أثناء الحركة.
- لا تظهر أيقونة يد ضخمة تحجب المحتوى.
- لا يتسبب التكبير في تغيير مكان الكتابة بطريقة غير صحيحة.
- يجب أن يكون الرجوع إلى مستوى تكبير مناسب متاحًا.
- يدعم التفاعل مع المساحة الكبيرة بسهولة.
- يمنع ظهور المربعات أو الشبكات غير المقصودة نتيجة خطأ في التحويلات.
استخدم نظام إحداثيات عالمية منفصلًا عن إحداثيات الشاشة، بحيث تكون كل العناصر محفوظة في مساحة العمل، بينما يكون العرض ناتجًا عن تحويل واضح ومختبر.
6. تحديد عناصر الخريطة والتحكم بها فورًا
عند تحديد خريطة أو دولة أو شكل أو عنصر، أريد أن أستطيع تحريكه أو تغيير حجمه مباشرة، دون الاضطرار إلى الضغط على زر إضافي منفصل لتفعيل التحكم.
المطلوب:
- اختيار العنصر.
- إظهار حدود التحديد ومقابض التحجيم عند الحاجة.
- إمكان التحريك مباشرة.
- تغيير الحجم مباشرة.
- الحفاظ على التناسب عند استخدام الاختصار أو السلوك المناسب.
- تدوير العناصر إذا كانت الأداة تدعم ذلك.
- نقل العناصر للأمام أو الخلف.
- منع الرسم فوق العنصر بالخطأ أثناء سحبه.
- إبقاء السلوك مفهومًا على الماوس واللمس والقلم.
- دعم تحريك وتكبير مساحة الخريطة من دون منع تحريك عنصر داخلها.
يجب الفصل بين:
- تحريك مساحة العمل نفسها.
- تحريك كائن موجود داخل مساحة العمل.
- تغيير حجم كائن.
- رسم عنصر جديد.
لا تجعل هذه العمليات تتداخل بشكل عشوائي.
7. التطبيق يجب أن يبدأ صفحة جديدة ونظيفة
عند تشغيل ShoaibBoard:
- افتح مساحة عمل جديدة ونظيفة افتراضيًا.
- لا تُظهر محتوى الجلسة السابقة بشكل تلقائي.
- لا تخلط صفحة جديدة بمحتوى مشروع قديم.
- لا تحذف المشروع السابق من القرص.
- إذا كانت هناك جلسة غير محفوظة، اعرض تنبيهًا مناسبًا عند محاولة الخروج أو تجاهلها إذا كانت السياسة المختارة تمنع الاستعادة التلقائية.
- يجب أن يستطيع المستخدم اختيار فتح مشروع سابق بنفسه.
إذا حذف المستخدم صفحة وكان هناك صفحة واحدة فقط:
- لا تجعل التطبيق يدخل حالة بلا صفحات أو ينهار.
- إما أن تمنع حذف الصفحة الأخيرة مع توضيح السبب، أو تحوّل العملية بشكل واضح إلى صفحة فارغة جديدة.
- لا تترك الصفحة الأخيرة مليئة بمحتوى قديم بعد تأكيد حذفها.
8. هوية التطبيق والاسم
اسم التطبيق الأساسي:
ShoaibBoard
العبارة التي تظهر أعلى يسار الواجهة:
ShoaibBoard
وتحتها:
Abdallah Shoiab Geo
أريد الهوية أن تكون:
- أنيقة.
- مميزة.
- احترافية.
- مناسبة لتطبيق تعليمي كبير.
- بسيطة بما يكفي حتى لا تشتت المدرس أثناء الشرح.
- قابلة لتطوير شعار مستقل لاحقًا.
- غير طفولية.
- غير مزدحمة.
يمكن تصميم علامة كتابية مميزة أو لمسة تبدو مرسومة يدويًا، بشرط وضوح الاسم وعدم التأثير على الواجهة.
لا تضع علامة داخل مساحة الكتابة تعيق الشرح. إذا أردت شاشة ترحيبية تحمل الهوية، فاجعلها منفصلة عن مساحة اللوحة، مع بقاء لوحة الرسم نظيفة.
9. تصميم شريط الأدوات الرئيسي
أريد شريط أدوات حديثًا واحترافيًا مستوحى من مبادئ التصميم الجيد في التطبيقات المعروفة، لكن بهوية خاصة بـ ShoaibBoard.
الموضع الافتراضي: أسفل منتصف الشاشة.
أضف إعدادًا لتغيير موضع الشريط إلى:
- الأسفل.
- الأعلى.
- اليمين.
- اليسار.
يجب أن تتغير طريقة ترتيب الشريط تلقائيًا وفق الاتجاه، دون تداخل الأزرار أو اختفاء القوائم.
9.1 ترتيب الأدوات ووظائفها
يجب أن يشمل الشريط الأدوات التالية، مع إمكانية تحسين ترتيبها وفق وضوح الاستخدام:
- الخرائط.
- فتح ملف.
- حفظ المشروع.
- تصدير.
- إدراج صورة.
- التحريك والتكبير.
- التحديد.
- القلم.
- الممحاة مع القائمة الفرعية.
- الأشكال.
- النص.
- التراجع Undo.
- الإعادة Redo.
الاستبعادات الإلزامية: لا تضف أدوات باسم Group أو Lens أو Window في الشريط الأساسي. زر Window السابق يجب أن يستبدل بأداة الخرائط.
لا تضف عناصر شكلية لا تؤدي وظيفة. كل زر يجب أن ينفذ الإجراء الذي يعلنه بوضوح.
9.2 متطلبات الشريط
- التصميم أنيق وحديث.
- الأيقونات متناسقة.
- المسافات مناسبة للمس بالأصابع.
- الأزرار لا تتكدس عندما تكون الشاشة صغيرة.
- القائمة الفرعية تفتح في موضع لا يحجب القلم أو مساحة الرسم قدر الإمكان.
- العنصر النشط واضح دون مؤثرات مبالغ فيها.
- لا تسمح بعرض شريط الأدوات خارج حدود الشاشة.
- يتحرك الشريط إلى الموضع الجديد بسلاسة.
- لا يختفي خلف النوافذ أو عناصر الخريطة.
- الأدوات الثانوية يمكن تنظيمها بقوائم بدلًا من زيادة حجم الشريط بلا داعٍ.
9.3 الألوان الأربعة فوق الشريط
احتفظ بمتطلب الألوان الأربعة فوق الشريط، مثبتة إلى حافته، وبالترتيب الأسود ثم الأحمر ثم الأزرق ثم الأخضر، خارج المساحة الرئيسية للأدوات.
عندما ينتقل الشريط إلى جانب الشاشة، يجب إعادة ترتيب الألوان بطريقة منطقية مع بقائها متصلة بصريًا بالشريط وغير متداخلة معه.
10. لوحة أدوات صغيرة في أسفل اليسار
أريد لوحة صغيرة عائمة في الركن السفلي الأيسر.
يجب الاحتفاظ بأداة تحريك شريط الأدوات التي تحمل رمز الأسهم الأربعة في أول موضع.
الأزرار الثانية والثالثة اللتان طلبت استبعادهما من اللوحة لا تعيدهما.
احتفظ ببقية الأدوات المساعدة المفيدة الموجودة في التصميم، مع مراجعة كل أداة والتأكد من عدم ازدواجها مع الوظائف الأساسية دون داعٍ.
وفي الجزء السفلي الأيسر أريد:
- زر ملء الشاشة.
- زر الإعدادات.
لا تضف أزرارًا في أسفل اليمين.
يجب أن:
- تكون اللوحة صغيرة.
- لا تغطي الكتابة.
- تتحمل الاستخدام باللمس.
- تكون وظائفها واضحة.
- لا تتحرك مع المحتوى المرسوم داخل مساحة العمل.
- تتعامل بصورة صحيحة مع انتقال شريط الأدوات لأعلى الشاشة أو جانبها.
11. الإعدادات الكاملة
أنشئ نافذة إعدادات منظمة، وليست مجموعة من الخيارات المبعثرة.
11.1 اللغة
اللغة الافتراضية: العربية.
أضف خيارًا لتغيير اللغة بين:
- العربية.
- الإنجليزية.
يجب أن تكون الترجمة حقيقية في جميع أنحاء التطبيق:
- الأدوات.
- الإعدادات.
- القوائم.
- رسائل التأكيد.
- نوافذ فتح وحفظ الملفات.
- التلميحات.
- رسائل الأخطاء.
- الواجهة الخاصة بالخرائط.
- رسائل التصدير والاستيراد.
عند العربية:
- استخدم RTL بشكل صحيح.
- اضبط اتجاه النص والقوائم.
- تأكد أن الأيقونات لا تنقلب بطريقة تفسد معناها.
- اجعل النص العربي مقروءًا.
- تأكد من عدم تداخل الحروف أو العناصر.
عند الإنجليزية:
- استخدم LTR بشكل صحيح.
- لا تترك نصوصًا عربية غير مترجمة إلا في الأسماء التي يجب أن تبقى كما هي.
لا تعتبر تغيير اتجاه الواجهة وحده تعريبًا كاملًا.
11.2 اللون الأساسي
أضف خيارًا لتحديد اللون الأساسي للواجهة Accent Color.
يجب تطبيق اللون المختار بصورة متناسقة على:
- العنصر المحدد.
- حالات التركيز.
- بعض التفاصيل المرئية.
- عناصر التحكم عند الحاجة.
لا تغيّر ألوان الكتابة المحفوظة أو الخرائط التعليمية بصورة عشوائية بسبب تغيير لون الواجهة.
11.3 لون الورقة
وفّر:
- ورقة بيضاء.
- ورقة سوداء أو داكنة.
المقصود تغيير خلفية صفحة الرسم، مع الحفاظ على وضوح الكتابة واختيار الألوان المناسبة بصريًا.
تغيير لون الورقة لا يجب أن يحذف المحتوى أو يعدل بياناته.
11.4 مظهر الواجهة
وفّر:
- Light Theme.
- Dark Theme.
الإعداد الافتراضي: الواجهة الفاتحة والورقة البيضاء.
افصل بين مظهر واجهة التطبيق ولون الورقة؛ فهما إعدادان مستقلان.
11.5 الشبكة
وفّر الخيارات التالية:
- بدون شبكة.
- خطوط.
- مربعات.
- نقاط.
يجب أن تكون الشبكة طبقة عرض منفصلة أو طبقة منظمة لا تتداخل مع الكائنات.
- الشبكة لا تتحول إلى مجموعة مربعات مرسومة داخل المحتوى.
- الشبكة لا تصبح عنصرًا عاديًا عند حفظ المشروع إلا إذا اختار المستخدم ذلك صراحة.
- لا تؤدي إلى بطء شديد عند التكبير.
- لا تتحرك بصورة مختلفة عن مساحة العمل.
- لا تحجب الخطوط.
- لا تفقد وضوحها مع مستويات التكبير المختلفة.
11.6 موضع شريط الأدوات
أضف اختيارًا مباشرًا بين أعلى وأسفل ويمين ويسار.
احفظ الإعداد بصورة دائمة بين مرات التشغيل.
يجب أن تتم عملية تغيير الموضع دون إعادة تشغيل التطبيق، ودون فقدان محتوى الصفحة أو تغير مواضع العناصر.
11.7 حفظ الإعدادات
احفظ تفضيلات المستخدم محليًا بصورة مناسبة وآمنة، مع إمكان إعادة ضبط الإعدادات إلى القيم الافتراضية.
الإعدادات الافتراضية:
- العربية.
- الواجهة الفاتحة.
- الورقة البيضاء.
- موضع الشريط: أسفل منتصف الشاشة.
- الشبكة: مغلقة.
12. الخرائط التعليمية: قسم أساسي وليس إضافة شكلية
أريد خرائط عالية الجودة داخل ShoaibBoard ومناسبة للمناهج المصرية، خصوصًا الدراسات الاجتماعية والجغرافيا.
لا أريد أن يكون التطبيق مجرد عارض لصور منخفضة الدقة أو أن يطلب مني البحث عن الخرائط وتحميلها يدويًا في كل مرة.
أريد تجربة خرائط مدمجة ومنظمة وقابلة للاستخدام أثناء الشرح.
12.1 متطلبات عامة
- خرائط العالم.
- خرائط القارات.
- خرائط الدول.
- إمكان تحديد دولة منفردة.
- إمكان تحديد مناطق أو أجزاء مناسبة من الخريطة.
- طبقات قابلة للتشغيل والإيقاف.
- طبقات خاصة بالحدود.
- طبقات الأنهار.
- طبقات البحيرات والمسطحات المائية.
- إظهار أسماء الدول والمدن والأنهار والبحيرات.
- إخفاء هذه الأسماء عند الحاجة.
- اختيار خريطة صماء أو خريطة تحمل أسماء.
- إدراج الخريطة في مساحة الكتابة.
- الكتابة فوق الخريطة دون إفساد بياناتها الأصلية.
يجب أن تسمح الخريطة بالتكبير إلى مستوى مناسب لرؤية الحدود والتفاصيل، دون أن تتحول إلى صورة مبكسلة بشدة.
12.2 مصر والمنهج المصري
أعطِ مصر اهتمامًا خاصًا، مع مراعاة طريقة التسمية العربية في المناهج المصرية.
أريد:
- حدود مصر بصورة واضحة ومكتملة.
- سواحلها.
- نهر النيل وفروعه أو مجراه وفق نوع الخريطة.
- البحيرات والمسطحات المائية المناسبة.
- المدن والمناطق المهمة.
- أسماء عربية واضحة عند اختيار الوضع العربي.
- إمكان تشغيل الأسماء وإيقافها.
- خرائط صماء للتدريب والامتحانات.
- خرائط تحمل البيانات للمراجعة والشرح.
- إمكان اختيار طبقات وفق الدرس.
- عدم وضع أسماء المدن أو البحيرات أو الأنهار في أماكن خاطئة.
- عدم تداخل الملصقات النصية قدر الإمكان.
- عدم رسم شكل مصر بصورة ناقصة أو مشوهة.
- عدم عرض حدود مضللة بسبب خلل في إسقاط الخريطة أو ترتيب الطبقات.
في الوضع التعليمي العربي الذي أطلبه، يجب استخدام تسمية فلسطين وفق تفضيلي، لا أن تُستبدل تلقائيًا بتسمية إسرائيل في هذه الواجهة التعليمية. يجب التعامل مع التسميات بطريقة منظمة قابلة للإدارة، مع عدم تغيير الحدود الجغرافية أو اختلاق بيانات غير موثقة.
12.3 الدول والقارات والتحديد الجزئي
يجب أن يكون بالإمكان:
- تحديد دولة كاملة.
- تحديد قارة.
- تحديد مساحة جغرافية أصغر عند دعم البيانات لذلك.
- إظهار العنصر المحدد بشكل واضح.
- نقل الخريطة أو تغيير حجمها.
- تحريك عناصر داخل الخريطة عند الحاجة.
- إزالة التحديد بسهولة.
مهم: لا تضع طبقة زرقاء شفافة فوق دولة لمجرد تحديدها، إلا إذا كان هذا أسلوبًا بصريًا اختياريًا واضحًا ومحدودًا. لا تجعل التحديد يحجب شكل الخريطة أو أسماءها.
لا تنشئ مربعًا أو شبكة غير مقصودة عند تحديد منطقة. يجب أن يتم التحديد بالحدود الفعلية للعنصر الجغرافي أو بمنطقة التحديد المناسبة.
12.4 ألوان المياه والطبقات
اجعل ألوان المياه واضحة ومناسبة للتعليم:
- البحيرات بلون سماوي فاتح.
- المحيطات والبحار بدرجات سماوية مميزة.
- اليابسة بلون مناسب للخلفية.
- الحدود واضحة.
- الأنهار قابلة للإظهار والإخفاء.
- لا تجعل ألوان المياه تختلط مع لون التحديد.
- لا تجعل ألوان الخريطة تعتمد على لون الواجهة وحده.
لا تضف تأثيرات لونية جذابة على حساب الدقة الجغرافية.
12.5 الدقة والمصادر
لا تنشئ خريطة من الذاكرة ولا ترسم الحدود يدويًا على نحو تقريبي وتقدمها باعتبارها صحيحة.
استخدم بيانات جغرافية موثوقة ومرخصة تسمح بطريقة توزيع التطبيق المقصودة، مثل بيانات الحدود الإدارية أو الخطوط الساحلية أو طبقات الأنهار المناسبة.
وثّق:
- مصدر كل مجموعة بيانات.
- تاريخ أو إصدار البيانات حين يتوفر.
- الترخيص.
- القيود المعروفة.
- طريقة تحويل الإحداثيات والإسقاط المستخدم.
- كيف يتم تحديث البيانات مستقبلًا.
لا تدّعِ أن البيانات دقيقة أو حديثة دون دليل.
إذا احتاجت الخرائط إلى ملفات أصول كبيرة، ضعها داخل حزمة التطبيق المنظمة بدلًا من تضمين ملايين الإحداثيات في كود الواجهة بطريقة تضر بالأداء.
12.6 الأداء
سبق أن ظهر بطء شديد عند التكبير واختيار مناطق كبيرة، حتى على جهاز قوي.
لذلك:
- لا تعِد رسم قاعدة بيانات العالم بالكامل عند تحريك الخريطة.
- استخدم مستويات تفاصيل مناسبة.
- استخدم تبسيطًا هندسيًا عند المستويات البعيدة، مع الاحتفاظ بالتفاصيل عند الاقتراب.
- حمّل الطبقات المطلوبة فقط عند الإمكان.
- اجعل إظهار الأسماء وإخفاءها عملية سريعة.
- امنع تراكم عمليات الرسم غير الضرورية.
- استخدم تخزينًا مؤقتًا مناسبًا عند إعادة رسم الطبقات.
- افصل الخريطة عن الكتابة والرسم فوقها.
- لا تُنشئ شبكة مربعات تغطي الخريطة بوصفها بديلًا لبياناتها الجغرافية.
- لا تنفذ حسابات هندسية ثقيلة في كل إطار دون داعٍ.
- اختبر تكبير الخريطة وتحريكها واختيار دولة وتبديل الطبقات.
- تأكد من أن تحديد مساحة جغرافية لا يتجمد لثوانٍ طويلة.
12.7 العمل دون إنترنت
أريد أن تعمل الخريطة محليًا بعد تثبيت التطبيق وتنزيل حزمة البيانات المقررة.
لا تعتمد على خادم أو CDN لتحميل خريطة أساسية عند كل تشغيل.
إذا كانت البيانات الإضافية اختيارية، وضّح حجمها واستخدامها، واجعل الحزمة الأساسية مفيدة حتى دون إنترنت.
لا تدّعِ أن جميع بيانات خرائط العالم مضمنة إن لم تكن موجودة فعلًا.
13. فتح الملفات وحفظ المشروع والتصدير
هذه نقطة أساسية: يجب التمييز بين حفظ مشروع يمكن تعديله لاحقًا وتصدير نسخة للعرض أو الطباعة.
أريد واجهة واضحة لـ:
- فتح مشروع.
- حفظ مشروع.
- استيراد PDF.
- تصدير PDF.
- إدراج صورة.
- تصدير صورة PNG عالية الجودة.
13.1 صيغة المشروع الأصلية
أنشئ صيغة مشروع منظمة تحفظ جميع ما يحتاج إليه المستخدم لمتابعة العمل، مثل:
- الصفحات.
- ترتيب الصفحات.
- أنواع العناصر.
- نقاط الخطوط.
- الألوان.
- السماكات.
- النصوص.
- الأشكال.
- الصور أو مراجع ملفاتها المحفوظة داخل الحزمة.
- إعدادات الصفحة.
- التحويلات المناسبة.
- بيانات الخرائط وعناصرها عند دعمها.
- أي معلومات أخرى لازمة لاستعادة المشروع.
لا تكتفِ بحفظ صورة نهائية إذا كان المطلوب مشروعًا قابلًا للتحرير.
يجب أن يستطيع المستخدم فتح المشروع وحفظه مرة أخرى دون فقدان الكتابة أو العناصر.
استخدم إصدارًا واضحًا لصيغة المشروع، وجهّز النظام لإجراء ترحيل للبيانات عند تغيير الصيغة مستقبلًا.
13.2 ملفات PDF
ادعم استيراد ملفات PDF وعرض صفحاتها داخل مساحة العمل.
المطلوب:
- تعدد صفحات الملف.
- الانتقال بين الصفحات.
- التكبير والتصغير.
- الكتابة فوق الصفحة.
- استخدام ألوان القلم.
- الإضافة والحذف والتراجع والإعادة للعلامات التي أُنشئت داخل التطبيق.
- الحفاظ على الصفحة الأصلية دون تغيير غير مقصود.
- إمكان حفظ العمل الناتج في PDF جديد يحتوي على الصفحة والعلامات عند التصدير.
- التعامل الواضح مع الملفات الكبيرة.
- إظهار رسالة خطأ مفهومة عند وجود PDF غير صالح أو غير مدعوم.
يجب أن يدعم المشروع حفظ حالة PDF المستورد والعلامات المرتبطة به، حتى يمكن متابعة العمل لاحقًا.
لا تدّعِ دعم كل ملفات PDF المشفرة أو جميع ميزاتها دون اختبار.
13.3 الصور
ادعم:
- إدراج صورة.
- تحريكها.
- تغيير حجمها.
- تحديدها وحذفها.
- الحفاظ على تناسبها عند الحاجة.
- الكتابة فوقها.
- تصديرها ضمن النتيجة النهائية.
- معالجة الملفات غير الصالحة بطريقة آمنة.
يجب أن يؤدي إدراج صورة ضخمة إلى تحميل معقول واستخدام ذاكرة منضبط، لا إلى انهيار التطبيق.
13.4 الحفظ الآمن
- لا تستبدل ملفًا موجودًا بصمت.
- وضح للمستخدم ما سيُحفظ وبأي صيغة.
- لا تفقد العمل السابق بسبب فشل التصدير.
- قدم رسائل خطأ مفيدة.
- افصل بين حفظ المشروع الأصلي والتصدير إلى PDF أو PNG.
- اختبر حفظ المشروع ثم فتحه مرة أخرى ومقارنة المحتوى.
14. نظام الصفحات
أريد نظام صفحات مناسبًا للشرح والدروس الطويلة.
يجب أن يشمل:
- إنشاء صفحة جديدة.
- التنقل بين الصفحات.
- تغيير ترتيب الصفحات.
- نسخ صفحة.
- حذف صفحة.
- مسح محتوى الصفحة دون حذف الصفحة.
- إمكانية حفظ المشروع بعدة صفحات.
- عدم خلط المحتوى بين الصفحات.
- عدم التأثير في صفحة عند الرسم على أخرى.
- منع حذف الصفحة الأخيرة بطريقة تؤدي إلى حالة غير صالحة.
- المحافظة على Undo وRedo بطريقة مفهومة.
إذا كان ملف PDF مستوردًا، حافظ على الترتيب بين صفحاته وبين العلامات المرتبطة بكل صفحة.
يجب أن تكون إضافة صفحة جديدة سريعة، وألا تعيد بناء المشروع بالكامل دون داعٍ.
15. هندسة التطبيق ومحرك الرسم
لا تنشئ مشروعًا ضخمًا متصلًا يعتمد على كود عشوائي أو معالجات أحداث كثيرة متعارضة.
يجب فصل المسؤوليات بوضوح، مثل:
- مدير حالة التطبيق.
- مدير الصفحات.
- محرك الرسم.
- نظام التحديد.
- محرك التحويلات والتحريك والتكبير.
- إدارة الإدخال واللمس والقلم.
- الممحاة.
- الأدوات والأشكال.
- إدارة الملفات.
- التصدير.
- الخرائط.
- الترجمة.
- الإعدادات.
- سجل Undo/Redo.
- حفظ المشاريع واستعادتها.
- طبقات العرض.
اجعل هندسة البيانات منظمة، واستخدم أنماطًا مناسبة بدلًا من إضافة ترقيعات لكل مشكلة.
15.1 عناصر مرسومة قابلة للتحرير
لا تجعل كل خط عنصر DOM مستقلًا أو عنصر SVG مستقلًا بطريقة تضر الأداء عند آلاف العناصر.
استخدم محرك Canvas أو التقنية الأنسب وفق بيئة التطبيق، مع تخزين المحتوى على شكل عناصر بيانات منظمة.
يجب أن يكون كل عنصر مرسوم قابلًا للوصف في بيانات المشروع بما يتناسب مع نوعه.
مثلًا:
- Stroke.
- Shape.
- Text.
- Image.
- Map Object.
- Imported Page أو PDF Overlay عند الحاجة.
استخدم الرسم على Canvas مع طبقات منفصلة عند ملاءمته، مثل:
- طبقة عرض المحتوى الدائم.
- طبقة مسارات الرسم الحالية.
- طبقة التحديد ومقابض التحجيم.
- طبقة الشبكة.
- طبقة مساعدة للتفاعل.
لا تسمح بأن تصبح كل حركة قلم سببًا لإعادة رسم كل شيء من الصفر إذا كان من الممكن تحسينها.
15.2 إدارة الحالة
يجب أن يكون هناك مصدر واضح للحقيقة بالنسبة إلى العناصر والصفحات والإعدادات.
لا تجعل محتوى اللوحة معتمدًا فقط على ما يظهر في الشاشة.
إذا أُعيد رسم Canvas، يجب أن يمكن إعادة إنتاج المحتوى من بيانات العناصر.
افصل البيانات عن العرض، حتى لا يؤدي تغيير حجم النافذة إلى فقدان العناصر.
15.3 نظام الإحداثيات
استخدم تحويلًا متسقًا بين:
- إحداثيات الجهاز أو المؤشر.
- إحداثيات نافذة العرض.
- إحداثيات مساحة العمل.
- إحداثيات الصفحة أو الخريطة عند الحاجة.
اختبر التحويلات مع التحريك والتكبير والتصغير وتغيير اتجاه الشريط وحجم الشاشة.
يجب ألا ينتقل الخط إلى مكان مختلف عند تغيير التكبير أو تغيير حجم النافذة.
16. الأداء على الأجهزة المحدودة
يجب عدم افتراض أن التطبيق سيعمل على جهاز خارق.
أريد أن يكون الاستخدام عمليًا على شاشة تعليمية وجهاز بموارد متوسطة، مع مراعاة أن أحد الأجهزة المستهدفة لديه نحو:
- نواتان فعليتان وأربع خيوط معالجة.
- تردد معلن يقارب 3.4 GHz.
- ذاكرة RAM في حدود 10 GB.
هذه أرقام مستهدفة تقريبية، وليست إثباتًا لما يستطيع التطبيق إنجازه.
ضع الأداء ضمن التصميم الأساسي، لا كمرحلة إصلاح لاحقة.
16.1 مبادئ التحسين
- تجنب العمليات الحسابية الثقيلة أثناء تحريك القلم.
- قلل تخصيص الذاكرة المتكرر.
- لا تنشئ مؤقتات أو مستمعات أحداث مكررة مع كل استخدام للأداة.
- استخدم requestAnimationFrame أو آلية الرسم المناسبة في البيئة المستهدفة.
- لا تعِد رسم عناصر ثابتة بلا داعٍ.
- استخدم طبقات رسم منفصلة عند الحاجة.
- نظّم نقاط التوقف والمهام المؤجلة.
- تعامل مع صور PDF الكبيرة بعناية.
- لا تحمّل طبقات خرائط غير مطلوبة.
- نظّم سجل Undo/Redo لتجنب تضخم الذاكرة.
- لا تحتفظ بعدد غير محدود من النسخ الكاملة الكبيرة دون سبب.
- حافظ على سلاسة التمرير والتكبير.
- اجعل فتح الملفات الكبيرة قابلًا للتشخيص.
- راقب استهلاك الذاكرة في الاختبارات طويلة المدة.
لا تضحِّ بصحة المحتوى من أجل زيادة السرعة؛ حسّن الخوارزميات والبيانات أولًا.
17. التراجع والإعادة
Undo وRedo ليسا زرين شكليين.
يجب دعم التراجع والإعادة بصورة صحيحة بالنسبة إلى العمليات المهمة، مثل:
- الرسم.
- مسح الخطوط.
- المسح الجزئي.
- الأشكال.
- النصوص.
- تحريك العناصر.
- تغيير الحجم.
- الإدراج.
- الحذف.
- التعديل المدعوم.
- تغيير ترتيب العناصر إذا كان ذلك متاحًا.
يجب ألا يتحول كل تحرك بسيط للمؤشر إلى عملية Undo مستقلة.
اجمع العمليات المرتبطة منطقيًا في عملية واحدة عند الحاجة.
تأكد أن:
- Undo يعكس آخر عملية فعلية.
- Redo يعيدها.
- لا تُفقد البيانات عند استخدامهما بالتبادل.
- يكون الأداء جيدًا مع المشاريع الكبيرة.
- يظهر تعطيل الزر عندما لا يوجد إجراء يمكن التراجع عنه، إذا كان هذا هو السلوك المختار.
18. الأشكال والنصوص والعناصر
أريد أدوات للأشكال الأساسية على الأقل:
- خط.
- سهم.
- مستطيل.
- دائرة أو شكل بيضاوي.
- مثلث.
- أشكال هندسية إضافية قابلة للتطوير.
أريد أداة نص:
- إضافة نص بالنقر على الصفحة.
- تعديل النص لاحقًا.
- تحديد حجمه ولونه.
- دعم العربية والإنجليزية.
- دعم اتجاه النص بصورة صحيحة.
- تحريك النص وتغيير موضعه.
- الحفاظ على الخطوط والمسافات قدر الإمكان عند الحفظ وإعادة الفتح.
يجب أن تكون الكتابة والتحديد والتحريك متناسقة. لا تجعل النص يتحول إلى صورة غير قابلة للتعديل دون حاجة.
يمكن إضافة أدوات إضافية في مراحل لاحقة، لكن لا تترك الأدوات الأساسية غير مكتملة.
19. الاستخدام باللمس وإمكانية الوصول
صمم التطبيق للاستخدام على شاشة كبيرة واقفًا أمامها، وليس للاستخدام بالماوس فقط.
المطلوب:
- أزرار مناسبة للمس.
- مسافات تمنع الضغط على الأداة المجاورة.
- تباين جيد.
- مؤشر واضح للأداة النشطة.
- خطوط عربية واضحة.
- عناصر واجهة لا تعتمد على Hover فقط.
- قوائم يمكن فتحها باللمس.
- منع النوافذ المنبثقة من الخروج عن حدود الشاشة.
- احترام مساحة الشاشة المتاحة.
- التعامل مع التدوير وتغيير الحجم إن كانت البيئة تسمح.
- عدم الاعتماد على مؤشرات صغيرة جدًا لأهم الوظائف.
اختبر الحالات التي تكون فيها الشاشة كاملة أو النافذة غير كاملة.
20. العمل دون اتصال بالإنترنت
اجعل التطبيق Offline-first قدر الإمكان.
لا تعتمد على CDN أو مكتبات خارجية يتم تنزيلها وقت التشغيل.
- ثبّت المكتبات المطلوبة ضمن حزمة التطبيق أو استخدم وسائل محلية مناسبة.
- لا تجعل خطأ الاتصال يمنع تشغيل السبورة.
- لا تطلب اتصالًا بالخادم لفتح مشروع محفوظ محليًا.
- لا تفقد الإعدادات عند انقطاع الإنترنت.
- وضح الميزات التي تحتاج تنزيلًا أوليًا للبيانات إن وجدت، خاصة بيانات الخرائط.
يجب أن يكون الاستخدام الأساسي للسبورة والكتابة والحفظ المحلي متاحًا دون إنترنت.
21. البنية والتقنيات
وفق أحدث مواصفات التنفيذ المطلوبة لهذا الإصدار، ابدأ بنسخة HTML مستقلة قابلة للتشغيل محليًا، بواجهة كاملة ومحرك رسم منظم.
شروط النسخة الأولية:
- ملف HTML جديد تمامًا.
- لا تعتمد على تعديل تطبيق سابق.
- لا تحتاج إلى خادم خارجي لتشغيل الوظائف الأساسية.
- تعمل دون اتصال بالإنترنت وفق قيود المتصفح والملفات المحلية.
- تكون وحدات الكود مفهومة ومنظمة.
- لا تضع واجهة شكلية وتترك الوظائف الحقيقية للتنفيذ في المستقبل.
- صمم الكود بحيث يمكن تطويره إلى مشروع أكبر، ويمكن لاحقًا دمجه داخل تطبيق مكتبي أو حزمة تشغيل عند الحاجة.
إذا كانت إحدى الميزات، مثل التعامل المتقدم مع ملفات النظام أو بيانات الخرائط الضخمة أو التكامل الخاص بشاشة Promethean، تتطلب غلافًا مكتبيًا أو مكونًا إضافيًا، فاشرح المتطلب التقني بدقة، وقدم أفضل تنفيذ متاح في النسخة الحالية دون الادعاء بأن HTML وحده يستطيع تجاوز قيود نظام التشغيل.
لا تستبدل الإصدار المستقل تلقائيًا بمشروع تقني مختلف من دون توضيح، ولا تجعل قابلية التحويل إلى EXE مبررًا لإهمال تجربة الاستخدام الحالية.
22. مراجعة التطبيقات والمكتبات المرجعية
ادرس المشاريع التالية لفهم أفضل الممارسات قبل تحديد المعمارية:
-
Excalidraw: https://github.com/excalidraw/excalidraw
-
توثيق مخطط بيانات Excalidraw: https://github.com/excalidraw/excalidraw/blob/master/dev-docs/docs/codebase/json-schema.mdx
-
tldraw: https://github.com/tldraw/tldraw
-
perfect-freehand: https://github.com/steveruizok/perfect-freehand
-
OpenBoard: https://github.com/OpenBoard-org/OpenBoard
استفد من هذه المراجع في فهم:
- تخزين العناصر.
- التراجع والإعادة.
- الرسم اليدوي.
- التحديد.
- التحويلات.
- الصفحات.
- قابلية التوسع.
- تنظيم الأدوات.
- معالجة الخطوط.
- التعامل مع السبورات التعليمية.
لا تكتفِ بذكر أسماء المشاريع. حدد ما يناسب هذا التطبيق وما لا يناسبه.
لا تنسخ كودًا من مشروع خارجي دون مراجعة الترخيص وشروط إعادة التوزيع. بعض المشاريع قد تكون لها شروط ترخيص تؤثر على التوزيع التجاري أو تعديل الكود.
لا تدّعِ أنك استخدمت مكتبة أو راجعت ملفًا من مصدر إذا لم تفعل ذلك بالفعل.
23. الاختبارات: ممنوع التسليم اعتمادًا على الشكل فقط
يجب أن يكون هناك اختبار وظيفي حقيقي للميزات الأساسية.
لا تعتبر ظهور النافذة أو فتح ملف HTML في المتصفح نجاحًا كاملًا.
23.1 اختبار الرسم
اختبر:
- قلم أسود.
- الألوان الأربعة.
- تغيير السمك.
- خطوط بطيئة وسريعة.
- منحنيات.
- تغيّر التكبير.
- تغيير حجم الشاشة.
- إنهاء الخط.
- عدم فقدان النقاط.
- عدم رسم خطوط شاردة عند لمس الشريط.
- عدم فقدان الإحداثيات بعد تغيير موضع الشريط.
23.2 اختبار اللمس
اختبر، على الأقل في البيئة المتاحة:
- إصبع واحد.
- إصبعين.
- Pinch Zoom.
- سحب مساحة العمل.
- الرسم بالماوس.
- قلم أو محاكاة إدخال القلم إذا كانت متاحة.
- عدم تشغيل الممحاة مع كل لمس.
- عدم تداخل المؤشر مع الرسم.
- توقف التفاعل عن الاستجابة عند فتح قائمة ثم إغلاقها.
إذا لم تتوفر شاشة Promethean في بيئة الاختبار، اذكر ذلك بوضوح، ولا تكتب أن الاختبار على الجهاز الحقيقي نجح.
23.3 اختبار الملفات
اختبر:
- حفظ مشروع.
- فتح المشروع المحفوظ.
- حفظ ثم إعادة فتح مشروع متعدد الصفحات.
- إدراج صورة.
- تصدير PNG.
- استيراد PDF إذا نُفذت الميزة.
- التصدير إلى PDF إذا نُفذت الميزة.
- التعامل مع ملف غير صالح.
- التعامل مع ملف كبير.
- المحافظة على بيانات المشروع بعد إعادة فتحه.
23.4 اختبار Undo/Redo
نفذ سلسلة اختبارات مثل:
- ارسم خطًا.
- ارسم شكلًا.
- أضف نصًا.
- حرك عنصرًا.
- امسح عنصرًا.
- استخدم Undo عدة مرات.
- استخدم Redo عدة مرات.
- تحقق من تطابق النتيجة مع التسلسل الأصلي.
23.5 اختبار الخرائط
إذا كانت الخرائط مفعلة:
- افتح خريطة العالم.
- كبّر وصغّر.
- حرّك الخريطة.
- حدد دولة.
- أخفِ أسماء الدول ثم أظهرها.
- فعّل طبقة المياه.
- اختبر خريطة مصر.
- تحقق من وضع الملصقات.
- تحقق من عدم ظهور مربعات غير مقصودة.
- تحقق من عدم ظهور تظليل غير مطلوب.
- راقب زمن الاستجابة والذاكرة.
23.6 اختبار الاستقرار
اختبر الاستخدام لفترة طويلة:
- رسم عدد كبير من الخطوط.
- تكرار Undo/Redo.
- التبديل بين الأدوات.
- فتح الإعدادات وإغلاقها.
- تغيير اتجاه الشريط عدة مرات.
- فتح وإغلاق الملفات.
- تغيير الصفحات.
- التكبير والتصغير المتكرر.
تحقق من عدم تراكم أحداث الإدخال أو انهيار الأداء.
24. قواعد صارمة لجودة التنفيذ
هذه القواعد غير قابلة للتفاوض:
- لا تعطِني مجرد Mockup.
- لا تعطِني صورة لواجهة على أنها تطبيق.
- لا تجعل الأزرار بلا وظائف.
- لا تستخدم بيانات وهمية على أنها خرائط صحيحة.
- لا تقل إن ميزة مكتملة إذا لم تُنفذ.
- لا تقل إن الاختبارات نجحت دون تشغيلها فعلًا.
- لا تخفِ الأخطاء برسائل عامة.
- لا تضع كل الكود في ملف عشوائي يصعب صيانته.
- لا تستخدم مكتبات تحتاج الإنترنت وقت التشغيل دون ضرورة.
- لا تجعل الكتابة فوق PDF أو الخريطة سببًا لتغيير الملف الأصلي بشكل غير متوقع.
- لا تجعل اللمس يمسح المحتوى افتراضيًا.
- لا تفقد البيانات بسبب تغيير حجم الشاشة.
- لا تسمح بتغيير لون الواجهة أن يفسد ألوان الخرائط أو المحتوى.
- لا تقدم ميزة ضخمة على أنها مكتملة إذا كانت مجرد نافذة تقول Coming Soon.
- لا تحذف متطلبات صعبة بصمت.
- لا تطلب مني جمع عشرات المكتبات أو تعديل الكود يدويًا إذا كان بإمكانك تسليم حزمة جاهزة.
- لا تترك وظائف مهمة تعتمد على ملفات غير مرفقة بالحزمة.
- لا تنشئ ملفات فارغة لتوحي باكتمال المشروع.
- لا تضف ميزات مستقبلية غير منفذة إلى قائمة الميزات المكتملة.
- لا تدّعِ الوصول إلى الشاشة الحقيقية أو اختبار جهاز المستخدم إذا لم يحدث ذلك.
إذا كانت هناك قيود حقيقية تمنع إكمال وظيفة، اذكرها بصراحة، واشرح ما تم تنفيذه وما تبقى وما يلزم لإكماله. لا تستخدم ذلك ذريعة لترك بقية التطبيق ناقصًا.
25. خطة التنفيذ دون التوقف عن العمل
ابدأ بالعمل الفعلي. إذا كان حجم المشروع أكبر مما يمكن إنجازه في رد واحد، قسّمه إلى مراحل واضحة، ولكن حافظ على تكاملها.
المرحلة الأولى:
- هيكل التطبيق.
- الهوية.
- مساحة الرسم.
- محرك القلم.
- الألوان.
- الأدوات الأساسية.
- اللمس والتحريك والتكبير.
- Undo/Redo.
- الإعدادات.
- حفظ المشروع وفتحه.
المرحلة الثانية:
- تعدد الصفحات.
- استيراد PDF.
- التصدير.
- الصور.
- النصوص.
- الأشكال.
- أدوات التحديد والممحاة المتقدمة.
المرحلة الثالثة:
- نظام الخرائط.
- بيانات مصر والخرائط التعليمية.
- الطبقات والأسماء.
- تحديد الدول والمناطق.
- تحسين الأداء الجغرافي.
المرحلة الرابعة:
- اختبار الأداء.
- اختبار الإدخال.
- إصلاح العيوب.
- توثيق الصيغ.
- تجهيز الحزمة النهائية.
- توثيق حدود التوافق مع Promethean.
هذه المراحل ليست تصريحًا بتسليم كل مرحلة باعتبارها تطبيقًا نهائيًا. المطلوب الحفاظ على التكامل، وعدم كسر الميزات المكتملة في المراحل السابقة.
إذا كانت بيئة العمل تسمح بإنجاز نسخة أكبر مباشرة، فأنجز أكبر قدر ممكن من الوظائف الحقيقية في الإصدار الأول.
26. ملفات التسليم المطلوبة
أريد ملفات فعلية قابلة للاستخدام، وليس كودًا نظريًا فقط.
سلّم، وفق ما تدعمه بيئة التطوير:
- ملف HTML المستقل الأساسي.
- الملفات المحلية الإضافية اللازمة إذا وجدت.
- ملفات الأصول المطلوبة.
- بيانات الخرائط وتوثيق مصادرها إذا كانت قد أُدمجت.
- ملف README باللغة العربية يشرح التشغيل.
- تعليمات واضحة لتشغيل التطبيق دون إنترنت.
- طريقة حفظ المشروع وفتحه.
- توثيق اختصارات لوحة المفاتيح إن وجدت.
- سجل مختصر بالميزات المكتملة.
- سجل بالميزات غير المكتملة.
- تقرير الاختبارات التي نُفذت فعلًا.
- الأخطاء المعروفة والقيود.
- طريقة بناء نسخة مستقبلية قابلة للتوزيع إذا احتاج ذلك إلى غلاف مكتبي.
- حزمة ZIP جاهزة عندما يكون ذلك ممكنًا ومناسبًا.
لا تنشئ روابط تنزيل وهمية. لا تقل إن الملف جاهز إذا لم يتم إنشاؤه والتحقق من وجوده.
27. معايير القبول النهائي
لن أعتبر ShoaibBoard مكتملًا لمجرد أن الواجهة جذابة.
يجب أن يجتاز المعايير التالية:
الرسم: سريع، ناعم، قابل للتراجع والإعادة، ولا يفقد النقاط أو الإحداثيات.
اللمس: لا يحول لمس الشاشة العادي إلى ممحاة، ويدعم التحريك والتكبير بصورة متوقعة.
الممحاة: تعمل وفق نمطها المحدد، ولا تمسح محتوى غير مقصود.
الشريط: ينتقل إلى الجهات الأربع ويحافظ على وظائفه وترتيبه.
الألوان: تظهر فوق الشريط بالترتيب المطلوب، واختيار أي منها يفعل القلم.
الإعدادات: تغير فعليًا اللغة والمظهر ولون الورقة والشبكة واللون الأساسي والموضع، وتحفظ اختيارات المستخدم.
الصفحات: إنشاء وحذف وتنقل دون فقدان غير متوقع للمحتوى.
الملفات: حفظ وإعادة فتح المشروع مع المحافظة على العناصر، واستيراد وتصدير الصيغ المدعومة بصورة صحيحة.
الخرائط: مبنية على بيانات موثوقة، وخصوصًا مصر، ولا تحتوي على عناصر جغرافية مرسومة بصورة تقريبية على أنها بيانات دقيقة.
الأداء: مناسب لجهاز متوسط الإمكانيات بقدر ما تسمح به البيئة والأدوات المستخدمة، مع توثيق أي حدود تم قياسها.
الجودة: لا توجد أزرار أساسية وهمية، ولا أخطاء واضحة في الواجهة، ولا ادعاءات اختبار غير صحيحة.
28. المطلوب منك الآن
ابدأ مباشرة في تطوير ShoaibBoard.
أولًا، اعرض ملخصًا قصيرًا للقرارات الهندسية التي اتخذتها وفق ترتيب الأولوية، ولا تحوّل الرد إلى بحث طويل أو خطة فقط.
بعد ذلك:
- أنشئ هيكل المشروع.
- نفّذ التطبيق.
- اختبر الوظائف الأساسية فعليًا حيث تسمح البيئة.
- أصلح الأخطاء التي تكتشفها.
- أنشئ ملفات التسليم.
- قدّم تقريرًا دقيقًا بما اكتمل وما لم يكتمل.
- اذكر أي اختبارات لم تستطع تنفيذها والسبب.
أهم شرط: لا تضحِّ بجودة الأساس من أجل كثرة الأدوات. أريد تطبيقًا حقيقيًا يبدأ بمحرك رسم وتفاعل ممتاز، ثم يبني عليه بقية المزايا بصورة صحيحة وقابلة للتطوير.
أريد ShoaibBoard أن يكون منصة تعليمية لمادة متكاملة، وليست لوحة بيضاء بسيطة ذات أزرار كثيرة. ابدأ التنفيذ الآن بالنسبة لصورة شريط الادوات والباقي لا اجدها شريط الادوات استخلص شكله بالكامل من my view board انت لا تنشئ شيئ بسيط انت تنشئ منصة تطبيق متكامل للشرح ! اهم شيئ مهم جداااااااااااا ان تستعين بالاشياء التي لا تعرف انها ستعمل ام لا مثلا ممحاه راحه ايد هذه الاشياء تأخذها من المصادر المساعده وكل المشاريع المساعده اقرأها كلها لتستفد في انشاء هذه وايضاا !!!! يجب ان تستوحي شكل وطريقة النظام التفاعلي من تطبيق my view board white board اهم شيئ تكون الواجهه شبه تطبيق my view board white board ونظامه في التعامل مع كل شيئ وطريقه وشكل واجهته مثلا تعتمد على الرموز فقط اتفهمني اطلق عنانك !!
النص الأصلي
اقرأ النص التالي جيداا وخد وقتك كامل في الانشاء والتفكير وحاول الاستعانه بالمساعده من المصادر المذكور خصوصا في الاشياء التي لا يمكنك التاكد منها بشكل كامل مثل ممحاه راحه اليد وهذا النص :
MASTER PROMPT — ShoaibBoard
Build a Premium, Production-Oriented Interactive Smart Board for Education
أريدك أن تعمل كفريق تطوير برمجيات متكامل يضم:
- Senior Software Architect
- Senior Frontend/Canvas Engineer
- Python Desktop Application Engineer
- Touchscreen and Stylus Interaction Specialist
- Digital Ink and Geometry Specialist
- GIS and Educational Cartography Specialist
- UI/UX Designer
- Performance Optimization Engineer
- Accessibility Specialist
- QA and Automated Testing Engineer
مهمتك ليست كتابة نموذج توضيحي أو مشروع مدرسي بسيط، بل إنشاء تطبيق سبورة تعليمية احترافي باسم ShoaibBoard، مخصص للشرح في السناتر التعليمية والفصول وعلى الشاشات التفاعلية الكبيرة، مع التركيز على الاستخدام الحقيقي بالقلم واللمس، خصوصًا شاشات Promethean.
أريد تطبيقًا حديثًا وسريعًا وقابلًا للتطوير، يتفوق في تجربة الاستخدام والتنظيم وسلاسة الرسم على تطبيقات السبورة التقليدية، ويستفيد من أفضل الأفكار الهندسية الموجودة في التطبيقات الاحترافية، دون تقليد واجهة أي منتج بشكل حرفي ودون انتهاك تراخيص الكود.
1. قاعدة الأولوية الأساسية: اقرأ المتطلبات من الأحدث إلى الأقدم
قبل البدء في البرمجة، تعامل مع ترتيب هذا المستند باعتباره ترتيب الأولوية.
القاعدة الإلزامية:
- أحدث متطلب واضح له الأولوية على أي متطلب أقدم يتعارض معه.
- إذا تكرر المتطلب نفسه بصياغة مختلفة، احتفظ بأحدث صياغة واجعلها المرجع الأساسي.
- إذا كان هناك طلب حديث يضيف ميزة إلى طلب سابق دون أن يلغيه، فاحتفظ بالاثنين.
- لا تحذف ميزة مهمة لمجرد أن تنفيذها صعب.
- لا تستبدل ميزة مطلوبة بميزة أخرى أسهل دون التصريح بذلك.
- لا تعتبر مجرد إنشاء زر أو نافذة دليلًا على اكتمال الوظيفة التي يمثلها.
- لا تغيّر المتطلبات بصمت. إذا وجدت تعارضًا حقيقيًا، سجله في جدول واضح، وطبّق أحدث طلب صريح بوصفه الأولوية.
- عندما تكون هناك عدة طرق ممكنة للتنفيذ، اختر الطريقة الأكثر ملاءمة للأداء والاعتمادية وسهولة الاستخدام على جهاز إمكانياته محدودة نسبيًا.
- لا تسألني عن قرارات يمكن اتخاذها هندسيًا بصورة منطقية. اتخذ قرارًا مناسبًا، وثّق السبب، وابدأ التنفيذ.
- لا تتوقف عند كتابة الخطة. المطلوب هو التطبيق والكود والملفات الفعلية والاختبارات.
أنشئ في البداية جدولًا داخليًا لمراجعة المتطلبات يتضمن:
- المتطلب.
- أحدث صياغة له.
- الأولوية.
- طريقة التنفيذ.
- طريقة التحقق من عمله.
استخدم الجدول لضمان عدم نسيان أي شيء، ثم ابدأ البرمجة مباشرة.
2. أهم المتطلبات الحديثة: التفاعل مع شاشة Promethean
هذه من أخطر وأهم نقاط المشروع؛ لأنها تتعلق بالاستخدام الفعلي في الفصل.
أستخدم شاشة تفاعلية من نوع Promethean، وأريد التعامل معها بالقلم واليد كما لو كنت أكتب على سبورة حقيقية.
2.1 توزيع مسؤوليات الإدخال
صمم نظام إدخال مستقلًا وقابلًا للتهيئة بحيث يميز، قدر الإمكان ووفق المعلومات التي يوفرها نظام التشغيل والشاشة:
- القلم الإلكتروني.
- الماوس.
- اللمس بإصبع واحد.
- اللمس بأصبعين أو أكثر.
- مساحة التلامس الكبيرة التي قد تدل على راحة اليد أو ظهر اليد، عندما تكون معلوماتها متاحة فعلًا.
المطلوب أن يكون السلوك الافتراضي كما يلي:
القلم الإلكتروني:
- يكتب ويرسم بسرعة عالية ودون تأخير ملحوظ.
- يتحكم في القلم والممحاة وفق طريقة التشغيل المختارة.
- لا تتحول كل لمسة من القلم إلى أمر لمس أو تحريك عشوائي.
- لا يحدث انقطاع متكرر في الخط نتيجة انتقال أحداث الإدخال بين الأدوات.
الماوس:
- يُستخدم للرسم والتحكم في الأدوات والعناصر.
- يكون سلوكه ثابتًا ومفهومًا، ولا يتحول تحريكه العادي إلى تكبير وتصغير غير مقصود.
- يدعم النقر والسحب وتحديد العناصر.
اللمس بالأصابع:
- يُستخدم للتحريك والتكبير والتصغير والإيماءات عندما يكون نمط التحريك والتكبير مفعّلًا.
- لا يمسح الكتابة تلقائيًا.
- لا يحذف العناصر لمجرد وضع اليد على الشاشة.
- يدعم السحب بإصبع واحد والتكبير أو التصغير بإصبعين.
- يُمنع تداخل اللمس مع الرسم بطريقة تؤدي إلى خطوط عشوائية.
2.2 منع مشكلة المسح التلقائي المستمر
ظهرت مشكلة في تنفيذ سابق جعلت التطبيق يعتبر التلامس كله مسحًا، ما جعل السبورة غير قابلة للاستخدام.
يُمنع تكرار هذه المشكلة تمامًا في التصميم:
- لا تعتبر أي Pointer أو Touch حدث ممحاة لمجرد أنه Touch.
- لا تجعل حجم التلامس الكبير وحده سببًا كافيًا لمسح مساحة عشوائية من اللوحة.
- لا تجعل اللمس العادي أو تحريك السبورة بالإصبع يمسح الكتابة.
- لا تُدخل قاعدة لمسح تلقائي تعمل دائمًا دون تحقق من نوع الإدخال.
- لا تُشغّل الممحاة التجريبية على أي لمس عام.
- افصل بوضوح بين منطق الرسم، ومنطق التحريك والتكبير، ومنطق المسح.
- اجعل الانتقال بين الأنماط متوقعًا، مع عدم فقدان الخطوط أو تنفيذ أوامر مزدوجة.
2.3 مسح راحة اليد أو ظهر اليد تلقائيًا
أريد أسلوبًا قريبًا من استخدام السبورة الحقيقية: أكتب بالقلم، وأريد إمكان استخدام الجزء المناسب من اليد في المسح دون الحاجة دائمًا إلى تبديل الأداة.
لكن يجب تنفيذ ذلك بحذر شديد:
- افحص ما إذا كانت المنظومة تعرض فعلًا بيانات موثوقة عن نوع القلم ونوع التلامس ومساحة التلامس.
- استخدم خصائص مثل pointer type وcontact geometry وغيرها إذا كانت متاحة ومدعومة في البيئة المستهدفة.
- لا تدّعِ القدرة على معرفة «ظهر اليد» تحديدًا إذا كان النظام لا يقدم بيانات تسمح بتمييزه.
- إذا تعذر تمييز ظهر اليد بصورة موثوقة، طبّق بديلًا آمنًا قابلًا للضبط، واجعل اكتشاف المسح التلقائي معطلًا افتراضيًا حتى يمكن التحقق منه.
- لا تجعل ميزة المسح التجريبية تتغلب على اللمس العادي.
- اجعل هناك طريقة واضحة لإيقاف الميزة من الإعدادات.
- وفّر تشخيصًا يعرض معلومات الإدخال التي تصل فعليًا من الشاشة، حتى يمكن ضبط السلوك على الجهاز الحقيقي.
شرط النجاح: وضع راحة اليد على الشاشة أثناء التحريك العادي لا يجب أن يمسح الكتابة بصورة عشوائية، واستخدام أصابع اليد للتكبير والتحريك يجب ألا يتسبب في محو المحتوى.
3. الكتابة والرسم: الأولوية القصوى للأداء
أريد كتابة ناعمة وسريعة، بحيث يتبع الخط سنّ القلم بدقة قدر الإمكان.
3.1 محرك رسم احترافي
أنشئ محرك Digital Ink حقيقيًا، وليس مجموعة من أحداث الرسم البسيطة.
يجب أن يدعم:
- جمع نقاط القلم بتتابع زمني دقيق.
- تخزين الإحداثيات ووقت كل نقطة.
- تجميع أحداث الإدخال المتقاربة عند الحاجة.
- تنعيم الخطوط دون إفساد المسار الأصلي.
- رسمًا متصلًا رغم اختلاف معدل وصول الأحداث.
- استخدام quadratic أو cubic curves عند ملاءمتها.
- تخفيف الاهتزاز دون جعل القلم متأخرًا عن اليد.
- الحفاظ على التفاصيل عند الكتابة السريعة.
- إنهاء الخط دون نتوءات أو اختفاء آخر جزء منه.
- منع الفجوات بين النقاط عند سرعة الحركة.
- دعم التكبير والتصغير مع بقاء سماكة القلم في الصورة المرئية متناسقة وفق سياسة واضحة.
- إمكانية إضافة دعم ضغط القلم إذا كان متاحًا بالفعل.
لا تستخدم تنعيمًا مبالغًا فيه يجعل الكتابة تتأخر. يجب تحقيق التوازن بين السلاسة والدقة والزمن الفعلي.
3.2 مؤشر القلم
أريد تغيير شكل مؤشر القلم إلى نجمة صغيرة جدًا تظهر عند نقطة الكتابة الفعلية.
الشروط:
- صغيرة وغير مزعجة.
- قريبة جدًا من موضع سن القلم.
- لا تتحول إلى شكل كبير يغطي الكتابة.
- تختفي أو تتغير بطريقة مناسبة عندما لا يكون القلم فوق مساحة الرسم.
- لا تؤدي إلى إبطاء الرسم.
- لا تترك أثرًا داخل المحتوى.
- لا تعرض أيقونة اليد الكبيرة التي تظهر أثناء التكبير إذا كان بالإمكان التحكم فيها من التطبيق.
3.3 الألوان الأربعة
اعرض أربعة ألوان دائرية فوق شريط الأدوات، بحيث تكون مثبتة إلى حافته وملاصقة له بصريًا، ولكنها ليست داخل مساحة الشريط الرئيسية.
ترتيبها الإلزامي:
- أسود.
- أحمر.
- أزرق.
- أخضر.
عند النقر على أي لون:
- يتفعل القلم تلقائيًا.
- يصبح اللون المحدد واضحًا بصريًا.
- يُستخدم اللون مباشرة في الكتابة التالية.
- لا يحتاج المستخدم إلى فتح نافذة إضافية.
- تعمل الألوان بالقلم والماوس واللمس المدعوم.
اجعل ألوان العلامات واضحة على الورق الأبيض والأسود. إذا كان من الضروري عرض تمييز إضافي للون المحدد، فليكن أنيقًا وصغيرًا.
3.4 خصائص القلم
أضف عند فتح إعدادات القلم:
- اختيار اللون.
- ضبط السمك.
- التحكم في درجة الشفافية إذا كان ذلك مناسبًا.
- قلم عادي.
- قلم تحديد أو هايلايتر.
- خصائص إضافية قابلة للتطوير.
- حفظ الإعدادات المختارة.
- عدم فتح نوافذ ثقيلة أو إبطاء الكتابة.
لا تملأ الواجهة بالأدوات دفعة واحدة؛ اجعل الخصائص المتقدمة في قوائم فرعية منظمة.
4. الممحاة بكل أوضاعها
أريد قائمة فرعية للممحاة تضم:
- Stroke Eraser: حذف خط أو عنصر كتابة كامل عند تحديده أو لمسه.
- Pixel Eraser: مسح جزء من محتوى الخط عند المرور فوقه، مع احترام حدود المسح.
- Lasso Eraser: تحديد منطقة حرة ثم حذف المحتوى الواقع داخلها.
- Clear Page: مسح محتوى الصفحة الحالية بعد تأكيد مناسب.
- Palm Erase: نمط اختياري للمسح التلقائي عند توفر بيانات موثوقة، وفق الشروط السابقة.
التفاصيل:
- اجعل تغيير نوع الممحاة واضحًا.
- أتح ضبط حجم ممحاة البكسل.
- لا تجعل ممحاة الخطوط تمسح عناصر بعيدة أو غير محددة.
- لا تجعل تحديد الممحاة الحرة يتحول إلى تحديد العناصر المراد الاحتفاظ بها بدل حذفها.
- اجعل مسح الصفحة عملية منفصلة عن حذف صفحة كاملة.
- اعرض تأكيدًا للعمليات المدمرة التي يصعب التراجع عنها.
- ادعم Undo بعد المسح.
- حافظ على الأداء عندما تحتوي اللوحة على آلاف الخطوط والنقاط.
5. التحريك والتكبير في زر واحد
أريد أداة واحدة باسم Pan & Zoom أو ما يعادلها، تجمع التحريك والتكبير والتصغير.
السلوك:
- سحب مناسب يحرك مساحة العمل.
- Pinch بإصبعين يكبر ويصغر.
- تغيير مستوى التكبير لا يفقد الإحداثيات.
- لا تتحرك الأدوات الثابتة مع المحتوى.
- لا تختفي الخطوط أثناء الحركة.
- لا تظهر أيقونة يد ضخمة تحجب المحتوى.
- لا يتسبب التكبير في تغيير مكان الكتابة بطريقة غير صحيحة.
- يجب أن يكون الرجوع إلى مستوى تكبير مناسب متاحًا.
- يدعم التفاعل مع المساحة الكبيرة بسهولة.
- يمنع ظهور المربعات أو الشبكات غير المقصودة نتيجة خطأ في التحويلات.
استخدم نظام إحداثيات عالمية منفصلًا عن إحداثيات الشاشة، بحيث تكون كل العناصر محفوظة في مساحة العمل، بينما يكون العرض ناتجًا عن تحويل واضح ومختبر.
6. تحديد عناصر الخريطة والتحكم بها فورًا
عند تحديد خريطة أو دولة أو شكل أو عنصر، أريد أن أستطيع تحريكه أو تغيير حجمه مباشرة، دون الاضطرار إلى الضغط على زر إضافي منفصل لتفعيل التحكم.
المطلوب:
- اختيار العنصر.
- إظهار حدود التحديد ومقابض التحجيم عند الحاجة.
- إمكان التحريك مباشرة.
- تغيير الحجم مباشرة.
- الحفاظ على التناسب عند استخدام الاختصار أو السلوك المناسب.
- تدوير العناصر إذا كانت الأداة تدعم ذلك.
- نقل العناصر للأمام أو الخلف.
- منع الرسم فوق العنصر بالخطأ أثناء سحبه.
- إبقاء السلوك مفهومًا على الماوس واللمس والقلم.
- دعم تحريك وتكبير مساحة الخريطة من دون منع تحريك عنصر داخلها.
يجب الفصل بين:
- تحريك مساحة العمل نفسها.
- تحريك كائن موجود داخل مساحة العمل.
- تغيير حجم كائن.
- رسم عنصر جديد.
لا تجعل هذه العمليات تتداخل بشكل عشوائي.
7. التطبيق يجب أن يبدأ صفحة جديدة ونظيفة
عند تشغيل ShoaibBoard:
- افتح مساحة عمل جديدة ونظيفة افتراضيًا.
- لا تُظهر محتوى الجلسة السابقة بشكل تلقائي.
- لا تخلط صفحة جديدة بمحتوى مشروع قديم.
- لا تحذف المشروع السابق من القرص.
- إذا كانت هناك جلسة غير محفوظة، اعرض تنبيهًا مناسبًا عند محاولة الخروج أو تجاهلها إذا كانت السياسة المختارة تمنع الاستعادة التلقائية.
- يجب أن يستطيع المستخدم اختيار فتح مشروع سابق بنفسه.
إذا حذف المستخدم صفحة وكان هناك صفحة واحدة فقط:
- لا تجعل التطبيق يدخل حالة بلا صفحات أو ينهار.
- إما أن تمنع حذف الصفحة الأخيرة مع توضيح السبب، أو تحوّل العملية بشكل واضح إلى صفحة فارغة جديدة.
- لا تترك الصفحة الأخيرة مليئة بمحتوى قديم بعد تأكيد حذفها.
8. هوية التطبيق والاسم
اسم التطبيق الأساسي:
ShoaibBoard
العبارة التي تظهر أعلى يسار الواجهة:
ShoaibBoard
وتحتها:
Abdallah Shoiab Geo
أريد الهوية أن تكون:
- أنيقة.
- مميزة.
- احترافية.
- مناسبة لتطبيق تعليمي كبير.
- بسيطة بما يكفي حتى لا تشتت المدرس أثناء الشرح.
- قابلة لتطوير شعار مستقل لاحقًا.
- غير طفولية.
- غير مزدحمة.
يمكن تصميم علامة كتابية مميزة أو لمسة تبدو مرسومة يدويًا، بشرط وضوح الاسم وعدم التأثير على الواجهة.
لا تضع علامة داخل مساحة الكتابة تعيق الشرح. إذا أردت شاشة ترحيبية تحمل الهوية، فاجعلها منفصلة عن مساحة اللوحة، مع بقاء لوحة الرسم نظيفة.
9. تصميم شريط الأدوات الرئيسي
أريد شريط أدوات حديثًا واحترافيًا مستوحى من مبادئ التصميم الجيد في التطبيقات المعروفة، لكن بهوية خاصة بـ ShoaibBoard.
الموضع الافتراضي: أسفل منتصف الشاشة.
أضف إعدادًا لتغيير موضع الشريط إلى:
- الأسفل.
- الأعلى.
- اليمين.
- اليسار.
يجب أن تتغير طريقة ترتيب الشريط تلقائيًا وفق الاتجاه، دون تداخل الأزرار أو اختفاء القوائم.
9.1 ترتيب الأدوات ووظائفها
يجب أن يشمل الشريط الأدوات التالية، مع إمكانية تحسين ترتيبها وفق وضوح الاستخدام:
- الخرائط.
- فتح ملف.
- حفظ المشروع.
- تصدير.
- إدراج صورة.
- التحريك والتكبير.
- التحديد.
- القلم.
- الممحاة مع القائمة الفرعية.
- الأشكال.
- النص.
- التراجع Undo.
- الإعادة Redo.
الاستبعادات الإلزامية: لا تضف أدوات باسم Group أو Lens أو Window في الشريط الأساسي. زر Window السابق يجب أن يستبدل بأداة الخرائط.
لا تضف عناصر شكلية لا تؤدي وظيفة. كل زر يجب أن ينفذ الإجراء الذي يعلنه بوضوح.
9.2 متطلبات الشريط
- التصميم أنيق وحديث.
- الأيقونات متناسقة.
- المسافات مناسبة للمس بالأصابع.
- الأزرار لا تتكدس عندما تكون الشاشة صغيرة.
- القائمة الفرعية تفتح في موضع لا يحجب القلم أو مساحة الرسم قدر الإمكان.
- العنصر النشط واضح دون مؤثرات مبالغ فيها.
- لا تسمح بعرض شريط الأدوات خارج حدود الشاشة.
- يتحرك الشريط إلى الموضع الجديد بسلاسة.
- لا يختفي خلف النوافذ أو عناصر الخريطة.
- الأدوات الثانوية يمكن تنظيمها بقوائم بدلًا من زيادة حجم الشريط بلا داعٍ.
9.3 الألوان الأربعة فوق الشريط
احتفظ بمتطلب الألوان الأربعة فوق الشريط، مثبتة إلى حافته، وبالترتيب الأسود ثم الأحمر ثم الأزرق ثم الأخضر، خارج المساحة الرئيسية للأدوات.
عندما ينتقل الشريط إلى جانب الشاشة، يجب إعادة ترتيب الألوان بطريقة منطقية مع بقائها متصلة بصريًا بالشريط وغير متداخلة معه.
10. لوحة أدوات صغيرة في أسفل اليسار
أريد لوحة صغيرة عائمة في الركن السفلي الأيسر.
يجب الاحتفاظ بأداة تحريك شريط الأدوات التي تحمل رمز الأسهم الأربعة في أول موضع.
الأزرار الثانية والثالثة اللتان طلبت استبعادهما من اللوحة لا تعيدهما.
احتفظ ببقية الأدوات المساعدة المفيدة الموجودة في التصميم، مع مراجعة كل أداة والتأكد من عدم ازدواجها مع الوظائف الأساسية دون داعٍ.
وفي الجزء السفلي الأيسر أريد:
- زر ملء الشاشة.
- زر الإعدادات.
لا تضف أزرارًا في أسفل اليمين.
يجب أن:
- تكون اللوحة صغيرة.
- لا تغطي الكتابة.
- تتحمل الاستخدام باللمس.
- تكون وظائفها واضحة.
- لا تتحرك مع المحتوى المرسوم داخل مساحة العمل.
- تتعامل بصورة صحيحة مع انتقال شريط الأدوات لأعلى الشاشة أو جانبها.
11. الإعدادات الكاملة
أنشئ نافذة إعدادات منظمة، وليست مجموعة من الخيارات المبعثرة.
11.1 اللغة
اللغة الافتراضية: العربية.
أضف خيارًا لتغيير اللغة بين:
- العربية.
- الإنجليزية.
يجب أن تكون الترجمة حقيقية في جميع أنحاء التطبيق:
- الأدوات.
- الإعدادات.
- القوائم.
- رسائل التأكيد.
- نوافذ فتح وحفظ الملفات.
- التلميحات.
- رسائل الأخطاء.
- الواجهة الخاصة بالخرائط.
- رسائل التصدير والاستيراد.
عند العربية:
- استخدم RTL بشكل صحيح.
- اضبط اتجاه النص والقوائم.
- تأكد أن الأيقونات لا تنقلب بطريقة تفسد معناها.
- اجعل النص العربي مقروءًا.
- تأكد من عدم تداخل الحروف أو العناصر.
عند الإنجليزية:
- استخدم LTR بشكل صحيح.
- لا تترك نصوصًا عربية غير مترجمة إلا في الأسماء التي يجب أن تبقى كما هي.
لا تعتبر تغيير اتجاه الواجهة وحده تعريبًا كاملًا.
11.2 اللون الأساسي
أضف خيارًا لتحديد اللون الأساسي للواجهة Accent Color.
يجب تطبيق اللون المختار بصورة متناسقة على:
- العنصر المحدد.
- حالات التركيز.
- بعض التفاصيل المرئية.
- عناصر التحكم عند الحاجة.
لا تغيّر ألوان الكتابة المحفوظة أو الخرائط التعليمية بصورة عشوائية بسبب تغيير لون الواجهة.
11.3 لون الورقة
وفّر:
- ورقة بيضاء.
- ورقة سوداء أو داكنة.
المقصود تغيير خلفية صفحة الرسم، مع الحفاظ على وضوح الكتابة واختيار الألوان المناسبة بصريًا.
تغيير لون الورقة لا يجب أن يحذف المحتوى أو يعدل بياناته.
11.4 مظهر الواجهة
وفّر:
- Light Theme.
- Dark Theme.
الإعداد الافتراضي: الواجهة الفاتحة والورقة البيضاء.
افصل بين مظهر واجهة التطبيق ولون الورقة؛ فهما إعدادان مستقلان.
11.5 الشبكة
وفّر الخيارات التالية:
- بدون شبكة.
- خطوط.
- مربعات.
- نقاط.
يجب أن تكون الشبكة طبقة عرض منفصلة أو طبقة منظمة لا تتداخل مع الكائنات.
- الشبكة لا تتحول إلى مجموعة مربعات مرسومة داخل المحتوى.
- الشبكة لا تصبح عنصرًا عاديًا عند حفظ المشروع إلا إذا اختار المستخدم ذلك صراحة.
- لا تؤدي إلى بطء شديد عند التكبير.
- لا تتحرك بصورة مختلفة عن مساحة العمل.
- لا تحجب الخطوط.
- لا تفقد وضوحها مع مستويات التكبير المختلفة.
11.6 موضع شريط الأدوات
أضف اختيارًا مباشرًا بين أعلى وأسفل ويمين ويسار.
احفظ الإعداد بصورة دائمة بين مرات التشغيل.
يجب أن تتم عملية تغيير الموضع دون إعادة تشغيل التطبيق، ودون فقدان محتوى الصفحة أو تغير مواضع العناصر.
11.7 حفظ الإعدادات
احفظ تفضيلات المستخدم محليًا بصورة مناسبة وآمنة، مع إمكان إعادة ضبط الإعدادات إلى القيم الافتراضية.
الإعدادات الافتراضية:
- العربية.
- الواجهة الفاتحة.
- الورقة البيضاء.
- موضع الشريط: أسفل منتصف الشاشة.
- الشبكة: مغلقة.
12. الخرائط التعليمية: قسم أساسي وليس إضافة شكلية
أريد خرائط عالية الجودة داخل ShoaibBoard ومناسبة للمناهج المصرية، خصوصًا الدراسات الاجتماعية والجغرافيا.
لا أريد أن يكون التطبيق مجرد عارض لصور منخفضة الدقة أو أن يطلب مني البحث عن الخرائط وتحميلها يدويًا في كل مرة.
أريد تجربة خرائط مدمجة ومنظمة وقابلة للاستخدام أثناء الشرح.
12.1 متطلبات عامة
- خرائط العالم.
- خرائط القارات.
- خرائط الدول.
- إمكان تحديد دولة منفردة.
- إمكان تحديد مناطق أو أجزاء مناسبة من الخريطة.
- طبقات قابلة للتشغيل والإيقاف.
- طبقات خاصة بالحدود.
- طبقات الأنهار.
- طبقات البحيرات والمسطحات المائية.
- إظهار أسماء الدول والمدن والأنهار والبحيرات.
- إخفاء هذه الأسماء عند الحاجة.
- اختيار خريطة صماء أو خريطة تحمل أسماء.
- إدراج الخريطة في مساحة الكتابة.
- الكتابة فوق الخريطة دون إفساد بياناتها الأصلية.
يجب أن تسمح الخريطة بالتكبير إلى مستوى مناسب لرؤية الحدود والتفاصيل، دون أن تتحول إلى صورة مبكسلة بشدة.
12.2 مصر والمنهج المصري
أعطِ مصر اهتمامًا خاصًا، مع مراعاة طريقة التسمية العربية في المناهج المصرية.
أريد:
- حدود مصر بصورة واضحة ومكتملة.
- سواحلها.
- نهر النيل وفروعه أو مجراه وفق نوع الخريطة.
- البحيرات والمسطحات المائية المناسبة.
- المدن والمناطق المهمة.
- أسماء عربية واضحة عند اختيار الوضع العربي.
- إمكان تشغيل الأسماء وإيقافها.
- خرائط صماء للتدريب والامتحانات.
- خرائط تحمل البيانات للمراجعة والشرح.
- إمكان اختيار طبقات وفق الدرس.
- عدم وضع أسماء المدن أو البحيرات أو الأنهار في أماكن خاطئة.
- عدم تداخل الملصقات النصية قدر الإمكان.
- عدم رسم شكل مصر بصورة ناقصة أو مشوهة.
- عدم عرض حدود مضللة بسبب خلل في إسقاط الخريطة أو ترتيب الطبقات.
في الوضع التعليمي العربي الذي أطلبه، يجب استخدام تسمية فلسطين وفق تفضيلي، لا أن تُستبدل تلقائيًا بتسمية إسرائيل في هذه الواجهة التعليمية. يجب التعامل مع التسميات بطريقة منظمة قابلة للإدارة، مع عدم تغيير الحدود الجغرافية أو اختلاق بيانات غير موثقة.
12.3 الدول والقارات والتحديد الجزئي
يجب أن يكون بالإمكان:
- تحديد دولة كاملة.
- تحديد قارة.
- تحديد مساحة جغرافية أصغر عند دعم البيانات لذلك.
- إظهار العنصر المحدد بشكل واضح.
- نقل الخريطة أو تغيير حجمها.
- تحريك عناصر داخل الخريطة عند الحاجة.
- إزالة التحديد بسهولة.
مهم: لا تضع طبقة زرقاء شفافة فوق دولة لمجرد تحديدها، إلا إذا كان هذا أسلوبًا بصريًا اختياريًا واضحًا ومحدودًا. لا تجعل التحديد يحجب شكل الخريطة أو أسماءها.
لا تنشئ مربعًا أو شبكة غير مقصودة عند تحديد منطقة. يجب أن يتم التحديد بالحدود الفعلية للعنصر الجغرافي أو بمنطقة التحديد المناسبة.
12.4 ألوان المياه والطبقات
اجعل ألوان المياه واضحة ومناسبة للتعليم:
- البحيرات بلون سماوي فاتح.
- المحيطات والبحار بدرجات سماوية مميزة.
- اليابسة بلون مناسب للخلفية.
- الحدود واضحة.
- الأنهار قابلة للإظهار والإخفاء.
- لا تجعل ألوان المياه تختلط مع لون التحديد.
- لا تجعل ألوان الخريطة تعتمد على لون الواجهة وحده.
لا تضف تأثيرات لونية جذابة على حساب الدقة الجغرافية.
12.5 الدقة والمصادر
لا تنشئ خريطة من الذاكرة ولا ترسم الحدود يدويًا على نحو تقريبي وتقدمها باعتبارها صحيحة.
استخدم بيانات جغرافية موثوقة ومرخصة تسمح بطريقة توزيع التطبيق المقصودة، مثل بيانات الحدود الإدارية أو الخطوط الساحلية أو طبقات الأنهار المناسبة.
وثّق:
- مصدر كل مجموعة بيانات.
- تاريخ أو إصدار البيانات حين يتوفر.
- الترخيص.
- القيود المعروفة.
- طريقة تحويل الإحداثيات والإسقاط المستخدم.
- كيف يتم تحديث البيانات مستقبلًا.
لا تدّعِ أن البيانات دقيقة أو حديثة دون دليل.
إذا احتاجت الخرائط إلى ملفات أصول كبيرة، ضعها داخل حزمة التطبيق المنظمة بدلًا من تضمين ملايين الإحداثيات في كود الواجهة بطريقة تضر بالأداء.
12.6 الأداء
سبق أن ظهر بطء شديد عند التكبير واختيار مناطق كبيرة، حتى على جهاز قوي.
لذلك:
- لا تعِد رسم قاعدة بيانات العالم بالكامل عند تحريك الخريطة.
- استخدم مستويات تفاصيل مناسبة.
- استخدم تبسيطًا هندسيًا عند المستويات البعيدة، مع الاحتفاظ بالتفاصيل عند الاقتراب.
- حمّل الطبقات المطلوبة فقط عند الإمكان.
- اجعل إظهار الأسماء وإخفاءها عملية سريعة.
- امنع تراكم عمليات الرسم غير الضرورية.
- استخدم تخزينًا مؤقتًا مناسبًا عند إعادة رسم الطبقات.
- افصل الخريطة عن الكتابة والرسم فوقها.
- لا تُنشئ شبكة مربعات تغطي الخريطة بوصفها بديلًا لبياناتها الجغرافية.
- لا تنفذ حسابات هندسية ثقيلة في كل إطار دون داعٍ.
- اختبر تكبير الخريطة وتحريكها واختيار دولة وتبديل الطبقات.
- تأكد من أن تحديد مساحة جغرافية لا يتجمد لثوانٍ طويلة.
12.7 العمل دون إنترنت
أريد أن تعمل الخريطة محليًا بعد تثبيت التطبيق وتنزيل حزمة البيانات المقررة.
لا تعتمد على خادم أو CDN لتحميل خريطة أساسية عند كل تشغيل.
إذا كانت البيانات الإضافية اختيارية، وضّح حجمها واستخدامها، واجعل الحزمة الأساسية مفيدة حتى دون إنترنت.
لا تدّعِ أن جميع بيانات خرائط العالم مضمنة إن لم تكن موجودة فعلًا.
13. فتح الملفات وحفظ المشروع والتصدير
هذه نقطة أساسية: يجب التمييز بين حفظ مشروع يمكن تعديله لاحقًا وتصدير نسخة للعرض أو الطباعة.
أريد واجهة واضحة لـ:
- فتح مشروع.
- حفظ مشروع.
- استيراد PDF.
- تصدير PDF.
- إدراج صورة.
- تصدير صورة PNG عالية الجودة.
13.1 صيغة المشروع الأصلية
أنشئ صيغة مشروع منظمة تحفظ جميع ما يحتاج إليه المستخدم لمتابعة العمل، مثل:
- الصفحات.
- ترتيب الصفحات.
- أنواع العناصر.
- نقاط الخطوط.
- الألوان.
- السماكات.
- النصوص.
- الأشكال.
- الصور أو مراجع ملفاتها المحفوظة داخل الحزمة.
- إعدادات الصفحة.
- التحويلات المناسبة.
- بيانات الخرائط وعناصرها عند دعمها.
- أي معلومات أخرى لازمة لاستعادة المشروع.
لا تكتفِ بحفظ صورة نهائية إذا كان المطلوب مشروعًا قابلًا للتحرير.
يجب أن يستطيع المستخدم فتح المشروع وحفظه مرة أخرى دون فقدان الكتابة أو العناصر.
استخدم إصدارًا واضحًا لصيغة المشروع، وجهّز النظام لإجراء ترحيل للبيانات عند تغيير الصيغة مستقبلًا.
13.2 ملفات PDF
ادعم استيراد ملفات PDF وعرض صفحاتها داخل مساحة العمل.
المطلوب:
- تعدد صفحات الملف.
- الانتقال بين الصفحات.
- التكبير والتصغير.
- الكتابة فوق الصفحة.
- استخدام ألوان القلم.
- الإضافة والحذف والتراجع والإعادة للعلامات التي أُنشئت داخل التطبيق.
- الحفاظ على الصفحة الأصلية دون تغيير غير مقصود.
- إمكان حفظ العمل الناتج في PDF جديد يحتوي على الصفحة والعلامات عند التصدير.
- التعامل الواضح مع الملفات الكبيرة.
- إظهار رسالة خطأ مفهومة عند وجود PDF غير صالح أو غير مدعوم.
يجب أن يدعم المشروع حفظ حالة PDF المستورد والعلامات المرتبطة به، حتى يمكن متابعة العمل لاحقًا.
لا تدّعِ دعم كل ملفات PDF المشفرة أو جميع ميزاتها دون اختبار.
13.3 الصور
ادعم:
- إدراج صورة.
- تحريكها.
- تغيير حجمها.
- تحديدها وحذفها.
- الحفاظ على تناسبها عند الحاجة.
- الكتابة فوقها.
- تصديرها ضمن النتيجة النهائية.
- معالجة الملفات غير الصالحة بطريقة آمنة.
يجب أن يؤدي إدراج صورة ضخمة إلى تحميل معقول واستخدام ذاكرة منضبط، لا إلى انهيار التطبيق.
13.4 الحفظ الآمن
- لا تستبدل ملفًا موجودًا بصمت.
- وضح للمستخدم ما سيُحفظ وبأي صيغة.
- لا تفقد العمل السابق بسبب فشل التصدير.
- قدم رسائل خطأ مفيدة.
- افصل بين حفظ المشروع الأصلي والتصدير إلى PDF أو PNG.
- اختبر حفظ المشروع ثم فتحه مرة أخرى ومقارنة المحتوى.
14. نظام الصفحات
أريد نظام صفحات مناسبًا للشرح والدروس الطويلة.
يجب أن يشمل:
- إنشاء صفحة جديدة.
- التنقل بين الصفحات.
- تغيير ترتيب الصفحات.
- نسخ صفحة.
- حذف صفحة.
- مسح محتوى الصفحة دون حذف الصفحة.
- إمكانية حفظ المشروع بعدة صفحات.
- عدم خلط المحتوى بين الصفحات.
- عدم التأثير في صفحة عند الرسم على أخرى.
- منع حذف الصفحة الأخيرة بطريقة تؤدي إلى حالة غير صالحة.
- المحافظة على Undo وRedo بطريقة مفهومة.
إذا كان ملف PDF مستوردًا، حافظ على الترتيب بين صفحاته وبين العلامات المرتبطة بكل صفحة.
يجب أن تكون إضافة صفحة جديدة سريعة، وألا تعيد بناء المشروع بالكامل دون داعٍ.
15. هندسة التطبيق ومحرك الرسم
لا تنشئ مشروعًا ضخمًا متصلًا يعتمد على كود عشوائي أو معالجات أحداث كثيرة متعارضة.
يجب فصل المسؤوليات بوضوح، مثل:
- مدير حالة التطبيق.
- مدير الصفحات.
- محرك الرسم.
- نظام التحديد.
- محرك التحويلات والتحريك والتكبير.
- إدارة الإدخال واللمس والقلم.
- الممحاة.
- الأدوات والأشكال.
- إدارة الملفات.
- التصدير.
- الخرائط.
- الترجمة.
- الإعدادات.
- سجل Undo/Redo.
- حفظ المشاريع واستعادتها.
- طبقات العرض.
اجعل هندسة البيانات منظمة، واستخدم أنماطًا مناسبة بدلًا من إضافة ترقيعات لكل مشكلة.
15.1 عناصر مرسومة قابلة للتحرير
لا تجعل كل خط عنصر DOM مستقلًا أو عنصر SVG مستقلًا بطريقة تضر الأداء عند آلاف العناصر.
استخدم محرك Canvas أو التقنية الأنسب وفق بيئة التطبيق، مع تخزين المحتوى على شكل عناصر بيانات منظمة.
يجب أن يكون كل عنصر مرسوم قابلًا للوصف في بيانات المشروع بما يتناسب مع نوعه.
مثلًا:
- Stroke.
- Shape.
- Text.
- Image.
- Map Object.
- Imported Page أو PDF Overlay عند الحاجة.
استخدم الرسم على Canvas مع طبقات منفصلة عند ملاءمته، مثل:
- طبقة عرض المحتوى الدائم.
- طبقة مسارات الرسم الحالية.
- طبقة التحديد ومقابض التحجيم.
- طبقة الشبكة.
- طبقة مساعدة للتفاعل.
لا تسمح بأن تصبح كل حركة قلم سببًا لإعادة رسم كل شيء من الصفر إذا كان من الممكن تحسينها.
15.2 إدارة الحالة
يجب أن يكون هناك مصدر واضح للحقيقة بالنسبة إلى العناصر والصفحات والإعدادات.
لا تجعل محتوى اللوحة معتمدًا فقط على ما يظهر في الشاشة.
إذا أُعيد رسم Canvas، يجب أن يمكن إعادة إنتاج المحتوى من بيانات العناصر.
افصل البيانات عن العرض، حتى لا يؤدي تغيير حجم النافذة إلى فقدان العناصر.
15.3 نظام الإحداثيات
استخدم تحويلًا متسقًا بين:
- إحداثيات الجهاز أو المؤشر.
- إحداثيات نافذة العرض.
- إحداثيات مساحة العمل.
- إحداثيات الصفحة أو الخريطة عند الحاجة.
اختبر التحويلات مع التحريك والتكبير والتصغير وتغيير اتجاه الشريط وحجم الشاشة.
يجب ألا ينتقل الخط إلى مكان مختلف عند تغيير التكبير أو تغيير حجم النافذة.
16. الأداء على الأجهزة المحدودة
يجب عدم افتراض أن التطبيق سيعمل على جهاز خارق.
أريد أن يكون الاستخدام عمليًا على شاشة تعليمية وجهاز بموارد متوسطة، مع مراعاة أن أحد الأجهزة المستهدفة لديه نحو:
- نواتان فعليتان وأربع خيوط معالجة.
- تردد معلن يقارب 3.4 GHz.
- ذاكرة RAM في حدود 10 GB.
هذه أرقام مستهدفة تقريبية، وليست إثباتًا لما يستطيع التطبيق إنجازه.
ضع الأداء ضمن التصميم الأساسي، لا كمرحلة إصلاح لاحقة.
16.1 مبادئ التحسين
- تجنب العمليات الحسابية الثقيلة أثناء تحريك القلم.
- قلل تخصيص الذاكرة المتكرر.
- لا تنشئ مؤقتات أو مستمعات أحداث مكررة مع كل استخدام للأداة.
- استخدم requestAnimationFrame أو آلية الرسم المناسبة في البيئة المستهدفة.
- لا تعِد رسم عناصر ثابتة بلا داعٍ.
- استخدم طبقات رسم منفصلة عند الحاجة.
- نظّم نقاط التوقف والمهام المؤجلة.
- تعامل مع صور PDF الكبيرة بعناية.
- لا تحمّل طبقات خرائط غير مطلوبة.
- نظّم سجل Undo/Redo لتجنب تضخم الذاكرة.
- لا تحتفظ بعدد غير محدود من النسخ الكاملة الكبيرة دون سبب.
- حافظ على سلاسة التمرير والتكبير.
- اجعل فتح الملفات الكبيرة قابلًا للتشخيص.
- راقب استهلاك الذاكرة في الاختبارات طويلة المدة.
لا تضحِّ بصحة المحتوى من أجل زيادة السرعة؛ حسّن الخوارزميات والبيانات أولًا.
17. التراجع والإعادة
Undo وRedo ليسا زرين شكليين.
يجب دعم التراجع والإعادة بصورة صحيحة بالنسبة إلى العمليات المهمة، مثل:
- الرسم.
- مسح الخطوط.
- المسح الجزئي.
- الأشكال.
- النصوص.
- تحريك العناصر.
- تغيير الحجم.
- الإدراج.
- الحذف.
- التعديل المدعوم.
- تغيير ترتيب العناصر إذا كان ذلك متاحًا.
يجب ألا يتحول كل تحرك بسيط للمؤشر إلى عملية Undo مستقلة.
اجمع العمليات المرتبطة منطقيًا في عملية واحدة عند الحاجة.
تأكد أن:
- Undo يعكس آخر عملية فعلية.
- Redo يعيدها.
- لا تُفقد البيانات عند استخدامهما بالتبادل.
- يكون الأداء جيدًا مع المشاريع الكبيرة.
- يظهر تعطيل الزر عندما لا يوجد إجراء يمكن التراجع عنه، إذا كان هذا هو السلوك المختار.
18. الأشكال والنصوص والعناصر
أريد أدوات للأشكال الأساسية على الأقل:
- خط.
- سهم.
- مستطيل.
- دائرة أو شكل بيضاوي.
- مثلث.
- أشكال هندسية إضافية قابلة للتطوير.
أريد أداة نص:
- إضافة نص بالنقر على الصفحة.
- تعديل النص لاحقًا.
- تحديد حجمه ولونه.
- دعم العربية والإنجليزية.
- دعم اتجاه النص بصورة صحيحة.
- تحريك النص وتغيير موضعه.
- الحفاظ على الخطوط والمسافات قدر الإمكان عند الحفظ وإعادة الفتح.
يجب أن تكون الكتابة والتحديد والتحريك متناسقة. لا تجعل النص يتحول إلى صورة غير قابلة للتعديل دون حاجة.
يمكن إضافة أدوات إضافية في مراحل لاحقة، لكن لا تترك الأدوات الأساسية غير مكتملة.
19. الاستخدام باللمس وإمكانية الوصول
صمم التطبيق للاستخدام على شاشة كبيرة واقفًا أمامها، وليس للاستخدام بالماوس فقط.
المطلوب:
- أزرار مناسبة للمس.
- مسافات تمنع الضغط على الأداة المجاورة.
- تباين جيد.
- مؤشر واضح للأداة النشطة.
- خطوط عربية واضحة.
- عناصر واجهة لا تعتمد على Hover فقط.
- قوائم يمكن فتحها باللمس.
- منع النوافذ المنبثقة من الخروج عن حدود الشاشة.
- احترام مساحة الشاشة المتاحة.
- التعامل مع التدوير وتغيير الحجم إن كانت البيئة تسمح.
- عدم الاعتماد على مؤشرات صغيرة جدًا لأهم الوظائف.
اختبر الحالات التي تكون فيها الشاشة كاملة أو النافذة غير كاملة.
20. العمل دون اتصال بالإنترنت
اجعل التطبيق Offline-first قدر الإمكان.
لا تعتمد على CDN أو مكتبات خارجية يتم تنزيلها وقت التشغيل.
- ثبّت المكتبات المطلوبة ضمن حزمة التطبيق أو استخدم وسائل محلية مناسبة.
- لا تجعل خطأ الاتصال يمنع تشغيل السبورة.
- لا تطلب اتصالًا بالخادم لفتح مشروع محفوظ محليًا.
- لا تفقد الإعدادات عند انقطاع الإنترنت.
- وضح الميزات التي تحتاج تنزيلًا أوليًا للبيانات إن وجدت، خاصة بيانات الخرائط.
يجب أن يكون الاستخدام الأساسي للسبورة والكتابة والحفظ المحلي متاحًا دون إنترنت.
21. البنية والتقنيات
وفق أحدث مواصفات التنفيذ المطلوبة لهذا الإصدار، ابدأ بنسخة HTML مستقلة قابلة للتشغيل محليًا، بواجهة كاملة ومحرك رسم منظم.
شروط النسخة الأولية:
- ملف HTML جديد تمامًا.
- لا تعتمد على تعديل تطبيق سابق.
- لا تحتاج إلى خادم خارجي لتشغيل الوظائف الأساسية.
- تعمل دون اتصال بالإنترنت وفق قيود المتصفح والملفات المحلية.
- تكون وحدات الكود مفهومة ومنظمة.
- لا تضع واجهة شكلية وتترك الوظائف الحقيقية للتنفيذ في المستقبل.
- صمم الكود بحيث يمكن تطويره إلى مشروع أكبر، ويمكن لاحقًا دمجه داخل تطبيق مكتبي أو حزمة تشغيل عند الحاجة.
إذا كانت إحدى الميزات، مثل التعامل المتقدم مع ملفات النظام أو بيانات الخرائط الضخمة أو التكامل الخاص بشاشة Promethean، تتطلب غلافًا مكتبيًا أو مكونًا إضافيًا، فاشرح المتطلب التقني بدقة، وقدم أفضل تنفيذ متاح في النسخة الحالية دون الادعاء بأن HTML وحده يستطيع تجاوز قيود نظام التشغيل.
لا تستبدل الإصدار المستقل تلقائيًا بمشروع تقني مختلف من دون توضيح، ولا تجعل قابلية التحويل إلى EXE مبررًا لإهمال تجربة الاستخدام الحالية.
22. مراجعة التطبيقات والمكتبات المرجعية
ادرس المشاريع التالية لفهم أفضل الممارسات قبل تحديد المعمارية:
Excalidraw:
https://github.com/excalidraw/excalidraw
توثيق مخطط بيانات Excalidraw:
https://github.com/excalidraw/excalidraw/blob/master/dev-docs/docs/codebase/json-schema.mdx
tldraw:
https://github.com/tldraw/tldraw
perfect-freehand:
https://github.com/steveruizok/perfect-freehand
OpenBoard:
https://github.com/OpenBoard-org/OpenBoard
استفد من هذه المراجع في فهم:
- تخزين العناصر.
- التراجع والإعادة.
- الرسم اليدوي.
- التحديد.
- التحويلات.
- الصفحات.
- قابلية التوسع.
- تنظيم الأدوات.
- معالجة الخطوط.
- التعامل مع السبورات التعليمية.
لا تكتفِ بذكر أسماء المشاريع. حدد ما يناسب هذا التطبيق وما لا يناسبه.
لا تنسخ كودًا من مشروع خارجي دون مراجعة الترخيص وشروط إعادة التوزيع. بعض المشاريع قد تكون لها شروط ترخيص تؤثر على التوزيع التجاري أو تعديل الكود.
لا تدّعِ أنك استخدمت مكتبة أو راجعت ملفًا من مصدر إذا لم تفعل ذلك بالفعل.
23. الاختبارات: ممنوع التسليم اعتمادًا على الشكل فقط
يجب أن يكون هناك اختبار وظيفي حقيقي للميزات الأساسية.
لا تعتبر ظهور النافذة أو فتح ملف HTML في المتصفح نجاحًا كاملًا.
23.1 اختبار الرسم
اختبر:
- قلم أسود.
- الألوان الأربعة.
- تغيير السمك.
- خطوط بطيئة وسريعة.
- منحنيات.
- تغيّر التكبير.
- تغيير حجم الشاشة.
- إنهاء الخط.
- عدم فقدان النقاط.
- عدم رسم خطوط شاردة عند لمس الشريط.
- عدم فقدان الإحداثيات بعد تغيير موضع الشريط.
23.2 اختبار اللمس
اختبر، على الأقل في البيئة المتاحة:
- إصبع واحد.
- إصبعين.
- Pinch Zoom.
- سحب مساحة العمل.
- الرسم بالماوس.
- قلم أو محاكاة إدخال القلم إذا كانت متاحة.
- عدم تشغيل الممحاة مع كل لمس.
- عدم تداخل المؤشر مع الرسم.
- توقف التفاعل عن الاستجابة عند فتح قائمة ثم إغلاقها.
إذا لم تتوفر شاشة Promethean في بيئة الاختبار، اذكر ذلك بوضوح، ولا تكتب أن الاختبار على الجهاز الحقيقي نجح.
23.3 اختبار الملفات
اختبر:
- حفظ مشروع.
- فتح المشروع المحفوظ.
- حفظ ثم إعادة فتح مشروع متعدد الصفحات.
- إدراج صورة.
- تصدير PNG.
- استيراد PDF إذا نُفذت الميزة.
- التصدير إلى PDF إذا نُفذت الميزة.
- التعامل مع ملف غير صالح.
- التعامل مع ملف كبير.
- المحافظة على بيانات المشروع بعد إعادة فتحه.
23.4 اختبار Undo/Redo
نفذ سلسلة اختبارات مثل:
- ارسم خطًا.
- ارسم شكلًا.
- أضف نصًا.
- حرك عنصرًا.
- امسح عنصرًا.
- استخدم Undo عدة مرات.
- استخدم Redo عدة مرات.
- تحقق من تطابق النتيجة مع التسلسل الأصلي.
23.5 اختبار الخرائط
إذا كانت الخرائط مفعلة:
- افتح خريطة العالم.
- كبّر وصغّر.
- حرّك الخريطة.
- حدد دولة.
- أخفِ أسماء الدول ثم أظهرها.
- فعّل طبقة المياه.
- اختبر خريطة مصر.
- تحقق من وضع الملصقات.
- تحقق من عدم ظهور مربعات غير مقصودة.
- تحقق من عدم ظهور تظليل غير مطلوب.
- راقب زمن الاستجابة والذاكرة.
23.6 اختبار الاستقرار
اختبر الاستخدام لفترة طويلة:
- رسم عدد كبير من الخطوط.
- تكرار Undo/Redo.
- التبديل بين الأدوات.
- فتح الإعدادات وإغلاقها.
- تغيير اتجاه الشريط عدة مرات.
- فتح وإغلاق الملفات.
- تغيير الصفحات.
- التكبير والتصغير المتكرر.
تحقق من عدم تراكم أحداث الإدخال أو انهيار الأداء.
24. قواعد صارمة لجودة التنفيذ
هذه القواعد غير قابلة للتفاوض:
- لا تعطِني مجرد Mockup.
- لا تعطِني صورة لواجهة على أنها تطبيق.
- لا تجعل الأزرار بلا وظائف.
- لا تستخدم بيانات وهمية على أنها خرائط صحيحة.
- لا تقل إن ميزة مكتملة إذا لم تُنفذ.
- لا تقل إن الاختبارات نجحت دون تشغيلها فعلًا.
- لا تخفِ الأخطاء برسائل عامة.
- لا تضع كل الكود في ملف عشوائي يصعب صيانته.
- لا تستخدم مكتبات تحتاج الإنترنت وقت التشغيل دون ضرورة.
- لا تجعل الكتابة فوق PDF أو الخريطة سببًا لتغيير الملف الأصلي بشكل غير متوقع.
- لا تجعل اللمس يمسح المحتوى افتراضيًا.
- لا تفقد البيانات بسبب تغيير حجم الشاشة.
- لا تسمح بتغيير لون الواجهة أن يفسد ألوان الخرائط أو المحتوى.
- لا تقدم ميزة ضخمة على أنها مكتملة إذا كانت مجرد نافذة تقول Coming Soon.
- لا تحذف متطلبات صعبة بصمت.
- لا تطلب مني جمع عشرات المكتبات أو تعديل الكود يدويًا إذا كان بإمكانك تسليم حزمة جاهزة.
- لا تترك وظائف مهمة تعتمد على ملفات غير مرفقة بالحزمة.
- لا تنشئ ملفات فارغة لتوحي باكتمال المشروع.
- لا تضف ميزات مستقبلية غير منفذة إلى قائمة الميزات المكتملة.
- لا تدّعِ الوصول إلى الشاشة الحقيقية أو اختبار جهاز المستخدم إذا لم يحدث ذلك.
إذا كانت هناك قيود حقيقية تمنع إكمال وظيفة، اذكرها بصراحة، واشرح ما تم تنفيذه وما تبقى وما يلزم لإكماله. لا تستخدم ذلك ذريعة لترك بقية التطبيق ناقصًا.
25. خطة التنفيذ دون التوقف عن العمل
ابدأ بالعمل الفعلي. إذا كان حجم المشروع أكبر مما يمكن إنجازه في رد واحد، قسّمه إلى مراحل واضحة، ولكن حافظ على تكاملها.
المرحلة الأولى:
- هيكل التطبيق.
- الهوية.
- مساحة الرسم.
- محرك القلم.
- الألوان.
- الأدوات الأساسية.
- اللمس والتحريك والتكبير.
- Undo/Redo.
- الإعدادات.
- حفظ المشروع وفتحه.
المرحلة الثانية:
- تعدد الصفحات.
- استيراد PDF.
- التصدير.
- الصور.
- النصوص.
- الأشكال.
- أدوات التحديد والممحاة المتقدمة.
المرحلة الثالثة:
- نظام الخرائط.
- بيانات مصر والخرائط التعليمية.
- الطبقات والأسماء.
- تحديد الدول والمناطق.
- تحسين الأداء الجغرافي.
المرحلة الرابعة:
- اختبار الأداء.
- اختبار الإدخال.
- إصلاح العيوب.
- توثيق الصيغ.
- تجهيز الحزمة النهائية.
- توثيق حدود التوافق مع Promethean.
هذه المراحل ليست تصريحًا بتسليم كل مرحلة باعتبارها تطبيقًا نهائيًا. المطلوب الحفاظ على التكامل، وعدم كسر الميزات المكتملة في المراحل السابقة.
إذا كانت بيئة العمل تسمح بإنجاز نسخة أكبر مباشرة، فأنجز أكبر قدر ممكن من الوظائف الحقيقية في الإصدار الأول.
26. ملفات التسليم المطلوبة
أريد ملفات فعلية قابلة للاستخدام، وليس كودًا نظريًا فقط.
سلّم، وفق ما تدعمه بيئة التطوير:
- ملف HTML المستقل الأساسي.
- الملفات المحلية الإضافية اللازمة إذا وجدت.
- ملفات الأصول المطلوبة.
- بيانات الخرائط وتوثيق مصادرها إذا كانت قد أُدمجت.
- ملف README باللغة العربية يشرح التشغيل.
- تعليمات واضحة لتشغيل التطبيق دون إنترنت.
- طريقة حفظ المشروع وفتحه.
- توثيق اختصارات لوحة المفاتيح إن وجدت.
- سجل مختصر بالميزات المكتملة.
- سجل بالميزات غير المكتملة.
- تقرير الاختبارات التي نُفذت فعلًا.
- الأخطاء المعروفة والقيود.
- طريقة بناء نسخة مستقبلية قابلة للتوزيع إذا احتاج ذلك إلى غلاف مكتبي.
- حزمة ZIP جاهزة عندما يكون ذلك ممكنًا ومناسبًا.
لا تنشئ روابط تنزيل وهمية. لا تقل إن الملف جاهز إذا لم يتم إنشاؤه والتحقق من وجوده.
27. معايير القبول النهائي
لن أعتبر ShoaibBoard مكتملًا لمجرد أن الواجهة جذابة.
يجب أن يجتاز المعايير التالية:
الرسم: سريع، ناعم، قابل للتراجع والإعادة، ولا يفقد النقاط أو الإحداثيات.
اللمس: لا يحول لمس الشاشة العادي إلى ممحاة، ويدعم التحريك والتكبير بصورة متوقعة.
الممحاة: تعمل وفق نمطها المحدد، ولا تمسح محتوى غير مقصود.
الشريط: ينتقل إلى الجهات الأربع ويحافظ على وظائفه وترتيبه.
الألوان: تظهر فوق الشريط بالترتيب المطلوب، واختيار أي منها يفعل القلم.
الإعدادات: تغير فعليًا اللغة والمظهر ولون الورقة والشبكة واللون الأساسي والموضع، وتحفظ اختيارات المستخدم.
الصفحات: إنشاء وحذف وتنقل دون فقدان غير متوقع للمحتوى.
الملفات: حفظ وإعادة فتح المشروع مع المحافظة على العناصر، واستيراد وتصدير الصيغ المدعومة بصورة صحيحة.
الخرائط: مبنية على بيانات موثوقة، وخصوصًا مصر، ولا تحتوي على عناصر جغرافية مرسومة بصورة تقريبية على أنها بيانات دقيقة.
الأداء: مناسب لجهاز متوسط الإمكانيات بقدر ما تسمح به البيئة والأدوات المستخدمة، مع توثيق أي حدود تم قياسها.
الجودة: لا توجد أزرار أساسية وهمية، ولا أخطاء واضحة في الواجهة، ولا ادعاءات اختبار غير صحيحة.
28. المطلوب منك الآن
ابدأ مباشرة في تطوير ShoaibBoard.
أولًا، اعرض ملخصًا قصيرًا للقرارات الهندسية التي اتخذتها وفق ترتيب الأولوية، ولا تحوّل الرد إلى بحث طويل أو خطة فقط.
بعد ذلك:
- أنشئ هيكل المشروع.
- نفّذ التطبيق.
- اختبر الوظائف الأساسية فعليًا حيث تسمح البيئة.
- أصلح الأخطاء التي تكتشفها.
- أنشئ ملفات التسليم.
- قدّم تقريرًا دقيقًا بما اكتمل وما لم يكتمل.
- اذكر أي اختبارات لم تستطع تنفيذها والسبب.
أهم شرط: لا تضحِّ بجودة الأساس من أجل كثرة الأدوات. أريد تطبيقًا حقيقيًا يبدأ بمحرك رسم وتفاعل ممتاز، ثم يبني عليه بقية المزايا بصورة صحيحة وقابلة للتطوير.
أريد ShoaibBoard أن يكون منصة تعليمية لمادة متكاملة، وليست لوحة بيضاء بسيطة ذات أزرار كثيرة.
ابدأ التنفيذ الآن
بالنسبة لصورة شريط الادوات والباقي لا اجدها شريط الادوات استخلص شكله بالكامل من my view board
انت لا تنشئ شيئ بسيط انت تنشئ منصة تطبيق متكامل للشرح !
اهم شيئ مهم جداااااااااااا ان تستعين بالاشياء التي لا تعرف انها ستعمل ام لا مثلا ممحاه راحه ايد هذه الاشياء تأخذها من المصادر المساعده وكل المشاريع المساعده اقرأها كلها لتستفد في انشاء هذه وايضاا !!!! يجب ان تستوحي شكل وطريقة النظام التفاعلي من تطبيق my view board white board اهم شيئ تكون الواجهه شبه تطبيق my view board white board ونظامه في التعامل مع كل شيئ وطريقه وشكل واجهته مثلا تعتمد على الرموز فقط اتفهمني اطلق عنانك !!
تلخيص النصوص العربية والإنجليزية أونلاين
تلخيص النصوص آلياً
تلخيص النصوص العربية والإنجليزية اليا باستخدام الخوارزميات الإحصائية وترتيب وأهمية الجمل في النص
تحميل التلخيص
يمكنك تحميل ناتج التلخيص بأكثر من صيغة متوفرة مثل PDF أو ملفات Word أو حتي نصوص عادية
رابط دائم
يمكنك مشاركة رابط التلخيص بسهولة حيث يحتفظ الموقع بالتلخيص لإمكانية الإطلاع عليه في أي وقت ومن أي جهاز ماعدا الملخصات الخاصة
مميزات أخري
نعمل علي العديد من الإضافات والمميزات لتسهيل عملية التلخيص وتحسينها
آخر التلخيصات
الأنا والآخر العربي في العصر الأموي ترتبط الأنا ارتباطاً وثيقا بالآخر ، فهما قطبان لا يغيب أحدهما عن...
التقى صباح اليو...التقى صباح اليوم د هشام محسن السقاف كلا على حدة بمسؤولي المنظمات الدولية بمنظمة صناعة الخير للتنمية ...
إليك النص الموج...إليك النص الموجود في الصورة جاهزاً للنسخ: أولاً: مفهوم الممارسة المهنية لطريقة تنظيم المجتمع يوضح ا...
Abraj Al-Arab C...Abraj Al-Arab Company reviews its risk assessments annually. They must be updated if there are chang...
اقرأ النص التال...اقرأ النص التالي جيداا وخد وقتك كامل في الانشاء والتفكير وحاول الاستعانه بالمساعده من المصادر المذكو...
المشكلات الاقتص...المشكلات الاقتصادية والمعيشية وعلاقتها بالمرض ترتبط الظروف الصحية للمريض ارتباطاً وثيقاً بنوعية الب...
مبيعات السيارات...مبيعات السيارات القابلة للشحن مستمرة في التقدم، وفوائد السيارات الكهربائية لا تتوقف عن الزيادة. هذا ...
اعاده تدوير عمل...اعاده تدوير عمليه اساسيه للحفاظ على بيئتنا تتضمن تحويل النفايات الى منتجات جديده او مواد خم لتصنيعها...
تتمثل مشكلة الم...تتمثل مشكلة المشروع في تصريف مياه تكثّف المكيفات إلى الصرف دون الاستفادة منها، مع حاجة النباتات المس...
استحضر الناشط أ...استحضر الناشط أبو هشام الصبيحي، محطات من الصراع العسكري والسياسي الذي شهدته مناطق الحجرية بمحافظة تع...
3. הגישה הקוגני...3. הגישה הקוגניטיבית (Cognitive Approach) ⭐ جديدة בסיס תיאורטי: הגישה הקוגניטיבית חוקרת את התהליכי...
بحث حول فهم الس...بحث حول فهم السوق وسلوك الزبون في منهجية Lean Startup مقدمة أصبحت المؤسسات الناشئة في العصر الحديث...