الاستشارات التنظيمية الدوائية · 2026
موقع ثنائي اللغة ولوحة إدارة محتوى لبيت خبرة في الشؤون التنظيمية الدوائية
يساعد بيت الخبرة الدوائية شركات الأدوية والمستحضرات الحيوية المماثلة والأجهزة الطبية ومستحضرات التجميل والمكملات الغذائية على تسجيل منتجاتها في مصر ودول الخليج والأردن والشرق الأوسط وشمال أفريقيا. صممنا موقعه بالعربية والإنجليزية وبنيناه، ثم أضفنا خلفه لوحة إدارة يغيّر منها فريقه أي محتوى في أي وقت دون انتظارنا. ثم ضبطنا الموقع للسرعة ولمحركات البحث.
زيارة الموقع (يفتح في تبويب جديد)
شارك في بنائه
- العميل
- لم يُذكر بناءً على طلب العميل
- المدة
- مايو – يوليو 2026
- الفريق
- مهندس واحد، من التصميم إلى الإطلاق
- اللغات
- العربية والإنجليزية، مع الاتجاه من اليمين لليسار
- الخدمات على الموقع
- 5 فئات · 18 صفحة خدمة
- طلبات الصفحة الرئيسية
- 8 ← 2
- الصلاحيات
- 6 أدوار، وصلاحيات لكل قسم
- الحالة
- قيد التشغيل
التقنيات
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Framer Motion
- Laravel 10
- MySQL
- Spatie Permission
- pdf.js
- JSON-LD
المنتج
12 صورة01
الموجز
كان على الموقع أن يبقى محدّثًا دون مطوّر.
السياق
بيت الخبرة الدوائية مكتب استشارات في الشؤون التنظيمية الدوائية في الجيزة بمصر. يسجّل المنتجات، ويُعد ملفات CTD و eCTD، ويبني أنظمة الجودة، ويدير اليقظة الدوائية، ويدرّب فرق الشؤون التنظيمية، لشركات في مصر والخليج والأردن والشرق الأوسط وشمال أفريقيا.
المشكلة
كانت النسخة الأولى من الموقع، التي بنيناها، تحمل جمله وصفحات خدماته وصوره داخل الكود. كانت كل خدمة جديدة أو مقال أو سطر مصحح سينتظرنا لتعديل في الكود وإصدار جديد.
الأهداف
- محتوى كل صفحة قابل للتعديل باللغتين
- الخدمات والمقالات ومكتبة الكتب تُدار من لوحة واحدة
- صلاحيات حسب الدور، مع سجل لمن غيّر ماذا
- موقع يبقى سريعًا وتقرؤه محركات البحث بشكل صحيح
02
الفريق
مهندس واحد، من التصميم إلى الإطلاق.
| مهندس رئيسيالتصميم، وموقع Next.js، والواجهة البرمجية ولوحة الإدارة بـ Laravel، والإصدارات، ومحركات البحث والسرعة | ×1 | التصميم، وموقع Next.js، والواجهة البرمجية ولوحة الإدارة بـ Laravel، والإصدارات، ومحركات البحث والسرعة | خبير |
|---|
03
تصميم UI/UX
هيبة بيت خبرة، بالكحلي والذهبي.
من عمل عليه
يخاطب الموقع مديري الشؤون التنظيمية في شركات الأدوية، فكان عليه أن يبدو هادئًا وخبيرًا. اخترنا له الكحلي الداكن مع الذهبي، وخطًا مذيّلًا للعناوين، وخطًا بسيطًا للقراءة، و Cairo للعربية. تبدأ الصفحة الرئيسية بما يقدمه المكتب وشهادته وأرقامه، مع خط مباشر إلى خبير عبر واتساب. صُممت كل صفحة بالعربية والإنجليزية، من اليمين لليسار ومن اليسار لليمين.
- نظام خطوط واحدFraunces للعناوين، و Inter للقراءة، و Cairo للعربية، بنفس الطريقة في كل صفحة.
- خط مباشر إلى خبيرتحمل الواجهة زر واتساب، فيسأل الزائر سؤاله دون ملء نموذج.
- الكتاب ككتابيظهر Regulatory Science Framework™ ككتاب بغلافه، ويُفتح على صفحات تُقلب.
04
الواجهات الأمامية
كل صفحة تأتي من لوحة الإدارة، والموقع ما زال سريعًا.
من عمل عليه
بُني الموقع بـ Next.js 16 و React 19 و Tailwind CSS 4، بالعربية والإنجليزية مع تخطيط كامل من اليمين لليسار. كل صفحة تُبنى مما تحمله لوحة الإدارة: أقسام الصفحة الرئيسية، وخمس فئات خدمات وثماني عشرة صفحة خدمة، ومركز المعلومات التنظيمية، وصفحة الكتاب. لا يظهر أي قسم إلا إذا كان له محتوى. الصفحات محفوظة مؤقتًا وتتجدد كل بضع دقائق، فيصل أي تعديل إلى الموقع دون إصدار جديد.
قرار 1
الصفحات تُرسم عند الطلب لا وقت البناء
بناء يتم والواجهة البرمجية غير متاحة كان سيُطلق صفحة رئيسية فارغة حتى يتجدد التخزين المؤقت.
المقابل · أول زيارة لكل لغة بعد كل إصدار تُرسم مباشرة.
قرار 2
كل قسم يتعثر وحده
إذا غابت بيانات قسم أو تعثرت الواجهة البرمجية، تظهر بقية الصفحة، ولا ترى محركات البحث صفحة خطأ أبدًا.
المقابل · القسم الناقص يختفي بهدوء، فيلاحظه الفريق على الموقع لا من رسالة خطأ.
قرار 3
ملف الكتاب يمر عبر عنوان الموقع نفسه
هكذا يقرأ pdf.js الملف على أجزاء دون أخطاء النطاقات المختلفة من مخزن الواجهة البرمجية.
المقابل · كل ملف PDF يمر عبر خادم الموقع، الذي لا يقدّم إلا مجلدات التخزين المسموح بها.
يُفتح كتاب Regulatory Science Framework™ ككتاب تُقلب صفحاته. يقرأ pdf.js ملف PDF على أجزاء صغيرة في عامل خلفي، وتُرسم الصفحات على دفعات، فيُفتح كتاب من 113 صفحة دون انتظار طويل.
- طلبان بدلًا من ثمانيةكانت الصفحة الرئيسية تطلب من الواجهة البرمجية ثماني مرات. الآن تعيد نقطتان مجمّعتان كل ما تحتاجه، ويتشاركها التخطيط والصفحة وبياناتها الوصفية.
- العنوان يظهر أولًاانتقلت حركة الواجهة الأولى من JavaScript إلى CSS، فيظهر العنوان مع أول رسم للصفحة بدل انتظار سكربتاتها، مع احترام إعداد تقليل الحركة.
- صور أخفأُعيد ضغط صور الموقع (صورة الواجهة من 5.1 ميجابايت إلى 742 كيلوبايت)، وتُقدَّم بصيغ AVIF أو WebP.
- تقرؤه محركات البحث بشكل صحيحلكل صفحة عنوانها ووصفها وعنوانها الأساسي وروابطها البديلة بالعربية والإنجليزية، وبيانات منظمة (الجهة، والخدمات، والأسئلة الشائعة، والمقالات، والكتاب، ومسار التنقل)، ومكان في خريطة موقع تغطي اللغتين.
- العربية والإنجليزية بشكل معكوستنعكس التخطيطات والقوائم والقائمة الجانبية على الهاتف للعربية. تبقى حقول البريد والهاتف من اليسار لليمين، وتتبع التواريخ كل لغة.
- العناوين القديمة تعملثلاث عشرة إعادة توجيه دائمة ترسل عناوين الخدمات القديمة إلى الجديدة، باللغتين.
05
الأنظمة الخلفية والمعمارية
لوحة واحدة لكل المحتوى، باللغتين.
من عمل عليه
الواجهة البرمجية ولوحة الإدارة تطبيق Laravel 10 واحد. كل نص يعرضه الموقع محفوظ مرة واحدة بالعربية والإنجليزية جنبًا إلى جنب، وتعيده الواجهة البرمجية بلغة الزائر مباشرة، فلا يتعامل الموقع مع الترجمة أبدًا.
قرار 1
اللغتان في حقل واحد
يُحفظ النص وترجمته معًا، وتسلّم الواجهة البرمجية الموقع لغة واحدة، فلا يتعامل الموقع مع الترجمة.
المقابل · البحث داخل لغة واحدة يعني البحث داخل JSON لا في عمود عادي.
قرار 2
نقاط مجمّعة مبنية من النقاط الموجودة
تستدعي النقطتان المجمّعتان نفس الكود الذي تستدعيه النقاط المفردة، فيحتفظ كل جزء بالشكل الذي يعرفه الموقع.
المقابل · الإجابات المجمّعة لا تُحفظ مؤقتًا على الخادم؛ يتحمل التخزين المؤقت في الموقع ذلك الحمل.
قرار 3
رقم إصدار لتخزين الإعدادات
تُقرأ الإعدادات في كل صفحة. حفظ أي إعداد يغيّر رقم الإصدار، فتنتهي كل النسخ المحفوظة مرة واحدة دون الحاجة لوسوم التخزين.
المقابل · تعتمد النقاط الأخرى على تخزين الموقع المؤقت بدل تخزين الخادم.
تعمل لوحة الإدارة بالعربية والإنجليزية، مع الاتجاه من اليمين لليسار. يدير منها الفريق الصفحات وأقسامها، وكتالوج الخدمات، والأخبار وتصنيفاتها، والأسئلة الشائعة، وبرامج التدريب، ومكتبة كتب بملفات PDF، والشركاء، والقوائم، ومكتبة الوسائط، وقائمة النشرة البريدية مع تصديرها CSV، وإعدادات الموقع العامة مثل الهوية وإعدادات البحث الافتراضية. تأتي ستة أدوار جاهزة، من المدير العام إلى مُطّلع للقراءة فقط، لكل منها صلاحيات لكل قسم، ويسجل سجل النشاط من غيّر ماذا.
- ستة أدوار وصلاحيات لكل قسمالمدير العام، ومدير المحتوى، والمحرر، ومدير العملاء المحتملين، ومدير محركات البحث، والمُطّلع. المحرر يعدّل المقالات التي كتبها فقط.
- سجل النشاطتُسجَّل التعديلات على الصفحات والخدمات والمقالات والشركاء والكتب والمستخدمين مع من قام بها.
- استعلامات أقل لقاعدة البياناتتُحمَّل شجرة الخدمات والشركاء والقوائم مع صورها وعناصرها الفرعية معًا، لا استعلامًا لكل عنصر.
06
DevOps
الموقع على Vercel، ولوحة الإدارة على استضافة العميل.
من عمل عليه
يعمل الموقع على Vercel، بعنوان www أساسيًا واحدًا لتتفق كل الروابط الأساسية. وتعمل الواجهة البرمجية ولوحة الإدارة على استضافة Hostinger الخاصة بالعميل، ونطلق إليها التحديثات عبر الصلاحية التي منحنا إياها العميل. تضغط الواجهة البرمجية إجاباتها النصية و JSON، ويُبقي ملف robots لوحة الإدارة والواجهة البرمجية خارج محركات البحث، مع السماح لها بجلب الصور التي يعرضها الرابط عند مشاركته.
07
النتيجة
العميل يحدّث موقعه بنفسه.
يعمل الموقع على لوحة الإدارة منذ يوليو 2026. يغيّر فريق العميل بنفسه الخدمات والمقالات والكتاب وإعدادات الموقع، باللغتين، دون إصدار جديد ودون انتظارنا.
أخبرنا بما تبنيه.
رسالة قصيرة تكفي. يرد عليك مهندس خبير خلال يوم عمل واحد.