منصة تعليم طبي
IASS
أكاديمية رقمية ثنائية اللغة للطب التجميلي تجمع الكورسات والكتب الطبية والمقالات ومحتوى المؤسسة وكتالوجات التعلم المرتبطة بالـAPI ضمن منصة منظمة.
الدور
مطور Frontend
التقنيات
01 / نظرة عامة
IASS أو International Academy of Aesthetic Science and Skills منصة تعليم طبي ثنائية اللغة تركز على الطب التجميلي والتشريح والسلامة والبروتوكولات السريرية، وتنظم الكورسات والكتب والمقالات ومعلومات الأكاديمية والمؤسس ضمن تجربة قابلة للتوسع.
02 / التحدي
كان على المنصة عرض أنواع متعددة من المحتوى القادم من الـAPI مع الحفاظ على سلوك موحد للترجمة والأسعار والصور والتصنيفات والمؤلفين والروابط. كما احتاج المحتوى الطبي لهوية موثوقة وSEO قوي وتحميل resilient وفصل واضح بين الميزات.
03 / الحل
نظمت التطبيق حسب مجالات الميزات وأبقيت ملفات المسارات صغيرة. تفضيلات اللغة والثيم من السيرفر تشكل الـHTML الأولي، وتقوم API clients وnormalizers مشتركة بتحويل اختلافات بيانات الباكند إلى View Models ثابتة، بينما تستخدم الصفحة الرئيسية endpoints بديلة للكورسات والكتب والمقالات عند نقص بيانات endpoint المجمع.
04 / الأساليب ومكان تطبيقها
ليس فقط ماذا استُخدم، بل أين ولماذا.
الأسلوب
Feature-based Architecture
أين طُبّق؟
ميزات الرئيسية والكورسات والكتب والمقالات تملك مكوناتها وAPI وأنواعها ومنطقها، بينما تبقى ملفات app routes صغيرة للتركيب فقط.
الأسلوب
ترجمة مولدة من السيرفر
أين طُبّق؟
الـroot layout يقرأ Cookie اللغة ويحدد lang وdir ويحمّل Cairo وInter ويوفر الرسائل عبر next-intl.
الأسلوب
API abstraction وNormalization بأنواع واضحة
أين طُبّق؟
apiFetch وnormalizers المشتركة توحد النصوص متعددة اللغة والصور والعملات والتصنيفات والمعرفات واختلاف أسماء حقول الباكند.
الأسلوب
تحميل احتياطي resilient
أين طُبّق؟
الصفحة الرئيسية تطلب /home أولاً ثم تحمّل الكورسات والكتب والمقالات بالتوازي عند نقص الأقسام أو فشل الطلب.
الأسلوب
سياسة موحدة لبيانات السيرفر
أين طُبّق؟
TanStack Query يحدد retry وstale time وسلوك refetch لتشارك الشاشات التفاعلية قواعد cache واضحة.
الأسلوب
نظام SEO منظم
أين طُبّق؟
Metadata المحلية وCanonical وOpen Graph وTwitter وOrganization/Website JSON-LD موزعة بين الـroot والصفحات.
05 / الميزات الرئيسية
القدرات الأساسية التي بُني عليها IASS.
واجهات عربية وإنكليزية مع اتجاه يتم توليده من السيرفر
أقسام الكورسات والكتب الطبية والمقالات والأكاديمية والمؤسس والإحصائيات
كتالوج مرتبط بالـAPI مع أسعار وصور وتصنيفات ومؤلفين وروابط محلية
تفضيلات ثيم وطبقة تفاعل بصري سريرية
إعداد TanStack Query لبيانات السيرفر في الواجهات التفاعلية
Organization وWebsite JSON-LD مع Metadata محلية
06 / مقالات مرتبطة
شرح أعمق للقرارات الهندسية المستخدمة في هذا النوع من المنتجات.
8 دقائق قراءة
كيف أبني بنية Frontend قابلة للتوسع
منهج عملي لتنظيم مشاريع الواجهات عبر ملكية الميزات وحدود البيانات المكتوبة بالأنواع وحالات التحميل والخطأ وبنية تسهّل التطوير والإطلاق.
قراءة المقال7 دقائق قراءة
بناء API Layer احترافي باستخدام TypeScript
طريقة فصل تفاصيل الاتصال عن الشاشات وتوحيد الأخطاء والأنواع والبحث والـPagination لتسهيل صيانة تطبيقات React وReact Native.
قراءة المقال7 دقائق قراءة
هندسة الواجهات للأنظمة التشغيلية
دروس من بناء واجهات لأنظمة المشافي وإدارة القضايا ولوحات التحكم والمنتجات ذات المسارات الكثيفة، حيث الوضوح ومعالجة الفشل أهم من الاستعراض البصري.
قراءة المقال