Hippotenus
منصة للمؤسسات التعليمية
لوحة الويب مبنية بـ Vite وReact: شاشات للمسؤول والمعلم وولي الأمر والطالب، ورسوم Recharts، ومراسلة فورية عبر Socket.IO.
اعرض المنتجما بنيناه بهذه التقنية
جميعها منشورة؛ صفحات المتاجر والتفاصيل في صفحة المنتجات.
Logaritim
بنك أسئلة وإنشاء اختبارات
الواجهة مكتوبة بالكامل بـ TypeScript وReact: معالج إنشاء الاختبار، ومعاينة مباشرة للورقة، والصيغ الرياضية عبر KaTeX.
اعرض المنتجما الأعمال التي يناسبها React
React مكتبة JavaScript تبني الشاشة من مكونات صغيرة قابلة لإعادة الاستخدام. تبرز قوتها في التطبيقات التي يبقيها المستخدم مفتوحة طوال اليوم والمليئة بالنماذج والجداول والمرشحات والرسوم البيانية: عندما تتغير البيانات يُعاد رسم الجزء المتأثر فقط، والمكوّن الذي يُكتب مرة واحدة يُستخدم في عشرات الشاشات.
حيث يناسب React
- لوحة إدارة أو بوابة عملاء أو أداة داخلية تُستخدم بعد تسجيل الدخول
- نظام تنظر فيه أدوار مختلفة، مثل المديرين والموظفين والعملاء، إلى البيانات نفسها من شاشاتها الخاصة
- شاشة تقارير مليئة بالرسوم البيانية والجداول والمرشحات
- تريد أن يبني الفريق نفسه تطبيق جوال لاحقاً (باستخدام React Native)
حيث لا نقترح React وحده
- موقع تعريفي من بضع صفحات نادراً ما يتغير محتواه: يكفي HTML عادي أو موقع ثابت
- الهدف الأساسي أن تجلب الصفحات زواراً من محركات البحث: عندها نستخدم React مع Next.js
- لدى فريقك مكتبة واجهات أخرى (Vue أو Angular) مستقرة وتعمل جيداً
React مع Vite أم Next.js
كلاهما React؛ والفرق في المكان الذي تُجهَّز فيه الصفحة. التطبيق المبني بـ Vite يعمل في المتصفح، وهو بنية بسيطة وسريعة للوحات التي تتطلب تسجيل الدخول. أما Next.js فيجهّز الصفحات بصيغة HTML على الخادم أو أثناء البناء، ونفضّله للصفحات التي يُنتظر أن تجلب زواراً من محركات البحث. في Hippotenus يوجد الاثنان جنباً إلى جنب: الموقع التعريفي بـ Next.js، واللوحة التي تستخدمها المؤسسات يومياً بـ Vite وReact.
| Vite + React | Next.js | |
|---|---|---|
| مكان تجهيز الصفحة | المتصفح | الخادم أو وقت البناء |
| الظهور في محركات البحث | غير مطلوب في الشاشات التي تتطلب تسجيل الدخول | قوي للصفحات العامة |
| النشر | تُقدَّم الملفات الثابتة الناتجة عن البناء | خادم Node.js أو مخرجات ثابتة |
| مثالنا | لوحة Hippotenus وLogaritim | Atölye Tasarım وhippotenus.com |
ماذا يفعل React في منتجاتنا
كُتبت بـ React الواجهات اليومية لاثنين من منتجاتنا المنشورة. ومن الاحتياجات التي عالجناها في الكود:
- في لوحة الويب في Hippotenus مجموعات شاشات منفصلة للمسؤول والمعلم وولي الأمر والطالب والمسؤول الأعلى؛ ومن يفتح صفحة لا يملك صلاحيتها يرى تنبيهاً بعدم السماح بالوصول.
- تُرسم تحليلات الاختبارات التجريبية والأداء في لوحة الطالب باستخدام Recharts على شكل رسوم رادارية وخطية وأعمدة.
- في شاشة المراسلة تصل الرسائل الجديدة ومؤشر «يكتب الآن» وإشعارات القراءة عبر Socket.IO دون إعادة تحميل الصفحة.
- في أداة إنشاء الاستبيانات وفي برنامج الدراسة يتم الترتيب بالسحب والإفلات (dnd-kit).
- في معالج إنشاء الاختبار في Logaritim تتحدّث معاينة الورقة فور اختيار الأعمدة والهوامش وحقول بيانات الطالب؛ وتُنتَج ملفات PDF للاختبار ونموذج الإجابة على الخادم ثم تُنزَّل.
- في لوحة إدارة لمشروع أحد العملاء تظهر الشاشات والأزرار أو تختفي بحسب شجرة صلاحيات، وتُعرض السجلات مجمّعة على الخريطة.
المكتبات التي نستخدمها بجانب React
Vite
خادم التطوير وأداة البناء. تُبنى لوحة Hippotenus وLogaritim وsoruverse.com باستخدام Vite.
TanStack Query
يحفظ البيانات القادمة من الخادم في ذاكرة مؤقتة ويحدّثها عند الحاجة. في لوحة Hippotenus تُحفظ الذاكرة المؤقتة في المتصفح أيضاً، فتظهر آخر البيانات دون انتظار عند إعادة فتح اللوحة.
Recharts
الرسوم الرادارية والخطية والأعمدة في اللوحات. نستخدمها في Hippotenus وفي الشاشات المالية لمشروع أحد العملاء.
KaTeX
لعرض الصيغ الرياضية بشكل صحيح في المتصفح. في Hippotenus وLogaritim تُرسم الصيغ في نصوص الأسئلة باستخدام KaTeX.
Socket.IO
رسائل وتحديثات حالة تصل دون إعادة تحميل الصفحة. نستخدمه في المراسلة داخل لوحة Hippotenus.
Vitest وTesting Library
لاختبار المكونات كما يراها المستخدم. تُختبر مكونات لوحة Hippotenus بهذه الأدوات.
كيف يسير مشروع React
- 01
مكالمة تعريفية مجانية
30 دقيقةنتحدث عمّن سيستخدم التطبيق، وأي دور يرى أي بيانات، والميزانية التي تفكر فيها.
- 02
نطاق مكتوب وعرض سعر
نكتب قائمة الشاشات والأدوار والصلاحيات ومعايير القبول، ونحسم هنا أيضاً هل يُبنى التطبيق بـ Vite أم بـ Next.js.
- 03
إصدارات أسبوعية
كل أسبوع تفتح النسخة العاملة في متصفحك وتجربها، وتحدد ملاحظاتك عمل الأسبوع التالي.
- 04
الاختبار والإطلاق
قبل الإطلاق يختبر مهندس ضمان جودة أول شاشات كل دور واحدة واحدة.
- 05
الثلاثون يوماً بعد الإطلاق
30 يوماًنصلح مجاناً الأخطاء التي تظهر في هذه الفترة، وبعدها يمكنك المتابعة بصيانة شهرية.
المدد ونطاقات الميزانية منشورة في صفحتي تطوير تطبيقات الويب والأسعار، وهذه الصفحة تستند إلى الأرقام نفسها.
أسئلة شائعة عن React
هل يظهر التطبيق المكتوب بـ React في محركات البحث؟
اللوحات التي تتطلب تسجيل الدخول لا تحتاج إلى ذلك. أما الصفحات العامة فتحتاج إلى تجهيز HTML مسبقاً: إما أن نستخدم Next.js أو نحوّل الصفحات إلى HTML ثابت أثناء البناء. موقع pepechura.com الذي تقرؤه الآن مكتوب بـ React، وكل صفحاته تُنتَج مسبقاً بهذه الطريقة.
ألا يبطؤ التطبيق كلما كبر؟
نقسّم الشاشات إلى حزم منفصلة، فلا ينزّل المستخدم إلا كود الصفحة التي يفتحها. في لوحة Hippotenus لا تُحمَّل مكتبات الرسوم البيانية والصيغ عند الفتح الأول، وفي المحادثات الطويلة تُرسم الأسطر الظاهرة على الشاشة فقط. وفي Logaritim تُنزَّل صفحات الإدارة الأكثر استخداماً مسبقاً عندما يكون المتصفح في وضع الخمول.
هل يمكن للفريق نفسه بناء تطبيق الجوال؟
نعم. يستخدم React Native نموذج المكونات نفسه الذي يستخدمه React. في Hippotenus يطوّر الفريق الذي يكتب لوحة الويب بـ React تطبيقَ الجوال أيضاً باستخدام Expo.
ماذا أملك عند تسليم المشروع؟
ترخيصاً دائماً لاستخدام البرنامج ووثائقه. ونقل الكود المصدري إليك ممكن أيضاً، وتُكتب رسومه الإضافية بنداً منفصلاً في العرض.
خدمات ذات صلة
تواصل معنا
لنتحدث عن تطبيقك بـ React
في مكالمة تعريفية مجانية مدتها 30 دقيقة نحدد معاً الأدوار والشاشات والاختيار بين Vite وNext.js.