نظرة عامة
Super Speed Security هو تطبيق ويب Full-Stack مخصص تم تطويره لشركة تعمل في مجال خدمات الأمن ونقل الأموال.
قمت بتصميم وتطوير التطبيق بالكامل من الصفر باستخدام PHP Native وMySQL وPDO وVanilla JavaScript مع بنية خفيفة مستوحاة من MVC وFront Controller.
أحد أهم أجزاء المشروع هو نظام إدارة محتوى مرئي تم دمجه مباشرة داخل الموقع.
بدلاً من إجبار المسؤول على الدخول إلى لوحة CMS تقليدية والبحث عن الصفحة أو العنصر الذي يريد تعديله، يمكن للمستخدم المصرح له تصفح الموقع بشكل طبيعي ثم الضغط بزر الفأرة الأيمن على المحتوى الذي يريد تعديله.
بحسب نوع العنصر، يستطيع المستخدم:
تعديل النصوص مباشرة
استبدال الصور
استبدال الفيديوهات
تعديل المحتوى العربي والإنجليزي
إدارة الوسائط بدون تعديل الكود
مشاهدة التعديل مباشرة داخل نفس الصفحة
بهذه الطريقة يصبح الموقع نفسه هو واجهة إدارة المحتوى، مما يوفر تجربة تعديل مرئية وبسيطة للمستخدمين غير التقنيين.
يحتوي التطبيق أيضاً على نظام لإدارة المسؤولين والمحررين يسمح للمسؤول بإضافة مستخدمين جدد ومنح أعضاء آخرين في الفريق صلاحية إدارة وتعديل محتوى الموقع دون مشاركة حساب إداري واحد.
يجمع النظام بين إدارة المحتوى من قاعدة البيانات، ودعم اللغات، ونظام Authentication، وإدارة الوسائط، والتصميم المتجاوب، ودعم RTL، والتواصل غير المتزامن بين JavaScript وPHP.
لذلك فالمشروع ليس مجرد موقع شركة، بل منصة CMS مخصصة تم تصميمها بالكامل لتناسب طريقة عمل العميل.
قمت بتصميم وتطوير التطبيق بالكامل من الصفر باستخدام PHP Native وMySQL وPDO وVanilla JavaScript مع بنية خفيفة مستوحاة من MVC وFront Controller.
أحد أهم أجزاء المشروع هو نظام إدارة محتوى مرئي تم دمجه مباشرة داخل الموقع.
بدلاً من إجبار المسؤول على الدخول إلى لوحة CMS تقليدية والبحث عن الصفحة أو العنصر الذي يريد تعديله، يمكن للمستخدم المصرح له تصفح الموقع بشكل طبيعي ثم الضغط بزر الفأرة الأيمن على المحتوى الذي يريد تعديله.
بحسب نوع العنصر، يستطيع المستخدم:
تعديل النصوص مباشرة
استبدال الصور
استبدال الفيديوهات
تعديل المحتوى العربي والإنجليزي
إدارة الوسائط بدون تعديل الكود
مشاهدة التعديل مباشرة داخل نفس الصفحة
بهذه الطريقة يصبح الموقع نفسه هو واجهة إدارة المحتوى، مما يوفر تجربة تعديل مرئية وبسيطة للمستخدمين غير التقنيين.
يحتوي التطبيق أيضاً على نظام لإدارة المسؤولين والمحررين يسمح للمسؤول بإضافة مستخدمين جدد ومنح أعضاء آخرين في الفريق صلاحية إدارة وتعديل محتوى الموقع دون مشاركة حساب إداري واحد.
يجمع النظام بين إدارة المحتوى من قاعدة البيانات، ودعم اللغات، ونظام Authentication، وإدارة الوسائط، والتصميم المتجاوب، ودعم RTL، والتواصل غير المتزامن بين JavaScript وPHP.
لذلك فالمشروع ليس مجرد موقع شركة، بل منصة CMS مخصصة تم تصميمها بالكامل لتناسب طريقة عمل العميل.
المشكلة التجارية
كانت شركة Super Speed بحاجة إلى أكثر من مجرد موقع تعريفي ثابت.
احتاجت الشركة إلى منصة احترافية لعرض خدمات الأمن وحماية الشخصيات والمنشآت والفعاليات ونقل الأموال والنقل الآمن والتخزين والخدمات المرتبطة بها للعملاء الناطقين باللغة العربية والإنجليزية.
كما كان من الضروري أن تتمكن الشركة من إدارة الموقع بعد تسليمه.
كان العميل بحاجة إلى تعديل النصوص والصور والفيديوهات وشعارات العملاء والمحتوى التسويقي دون تعديل الكود أو الاعتماد على المطور في كل تحديث.
بالإضافة إلى ذلك، كان يجب أن يعمل النظام على بيئة الاستضافة الحالية الخاصة بالعميل دون إضافة تعقيدات أو متطلبات غير ضرورية ناتجة عن استخدام Framework كبير.
احتاجت الشركة إلى منصة احترافية لعرض خدمات الأمن وحماية الشخصيات والمنشآت والفعاليات ونقل الأموال والنقل الآمن والتخزين والخدمات المرتبطة بها للعملاء الناطقين باللغة العربية والإنجليزية.
كما كان من الضروري أن تتمكن الشركة من إدارة الموقع بعد تسليمه.
كان العميل بحاجة إلى تعديل النصوص والصور والفيديوهات وشعارات العملاء والمحتوى التسويقي دون تعديل الكود أو الاعتماد على المطور في كل تحديث.
بالإضافة إلى ذلك، كان يجب أن يعمل النظام على بيئة الاستضافة الحالية الخاصة بالعميل دون إضافة تعقيدات أو متطلبات غير ضرورية ناتجة عن استخدام Framework كبير.
الحل المقترح
بدلاً من استخدام WordPress أو CMS جاهز، قمت ببناء نظام إدارة محتوى مخصص بالكامل داخل التطبيق.
كانت الفكرة الأساسية هي إزالة الفصل التقليدي بين الموقع ولوحة الإدارة.
عندما يقوم المستخدم المصرح له بتسجيل الدخول وتصفح الموقع، يمكنه إدارة العناصر مباشرة داخل الصفحة التي يشاهدها.
يتم استخدام Right Click على العنصر المطلوب لتحديده وفتح أدوات التعديل المناسبة.
النصوص
يمكن الضغط بزر الفأرة الأيمن على النص وتعديل المحتوى مباشرة.
الصور
يمكن الضغط على الصورة واستبدالها بصورة جديدة.
الفيديوهات
يمكن استبدال ملفات الفيديو بالطريقة نفسها دون الحاجة إلى تعديل الكود.
يتولى JavaScript تجربة التعديل داخل الواجهة والتواصل مع PHP بشكل غير متزامن.
يقوم Backend بعد ذلك بالتحقق من الطلب ومعالجة المحتوى أو الملفات وحفظ التغييرات داخل MySQL أو نظام تخزين الوسائط.
وبما أن المحتوى يعتمد على قاعدة البيانات، فإن نفس النظام يدعم المحتوى باللغتين العربية والإنجليزية.
كما يحتوي التطبيق على نظام منفصل لإدارة المستخدمين يسمح للمسؤول بإضافة محررين آخرين ومنحهم إمكانية إدارة محتوى الموقع.
كانت الفكرة الأساسية هي إزالة الفصل التقليدي بين الموقع ولوحة الإدارة.
عندما يقوم المستخدم المصرح له بتسجيل الدخول وتصفح الموقع، يمكنه إدارة العناصر مباشرة داخل الصفحة التي يشاهدها.
يتم استخدام Right Click على العنصر المطلوب لتحديده وفتح أدوات التعديل المناسبة.
النصوص
يمكن الضغط بزر الفأرة الأيمن على النص وتعديل المحتوى مباشرة.
الصور
يمكن الضغط على الصورة واستبدالها بصورة جديدة.
الفيديوهات
يمكن استبدال ملفات الفيديو بالطريقة نفسها دون الحاجة إلى تعديل الكود.
يتولى JavaScript تجربة التعديل داخل الواجهة والتواصل مع PHP بشكل غير متزامن.
يقوم Backend بعد ذلك بالتحقق من الطلب ومعالجة المحتوى أو الملفات وحفظ التغييرات داخل MySQL أو نظام تخزين الوسائط.
وبما أن المحتوى يعتمد على قاعدة البيانات، فإن نفس النظام يدعم المحتوى باللغتين العربية والإنجليزية.
كما يحتوي التطبيق على نظام منفصل لإدارة المستخدمين يسمح للمسؤول بإضافة محررين آخرين ومنحهم إمكانية إدارة محتوى الموقع.
بنية النظام
طبقة العرض/الواجهة العامة
تقوم واجهات PHP بعرض الموقع الإلكتروني ثنائي اللغة بشكل طبيعي.
طبقة التفاعل مع نظام إدارة المحتوى (CMS)
تكتشف جافا سكريبت العناصر القابلة للتعديل وتتعامل معها:
أحداث النقر بزر الماوس الأيمن/قائمة السياق
تحديد العنصر
تحرير النصوص
استبدال الصور
استبدال مقاطع الفيديو
جلب طلبات واجهة برمجة التطبيقات (API)
تحديث الصفحة المعروضة بعد إتمام التغييرات بنجاح.
طبقة تطبيق PHP
تستقبل نقاط نهاية PHP طلبات نظام إدارة المحتوى (CMS) وتنفذ ما يلي:
التحقق من المصادقة
التحقق من صحة الطلب
تحديثات المحتوى
معالجة الملفات
عمليات قاعدة البيانات
استبدال الوسائط.
طبقة البيانات
يخزن MySQL المحتوى المُستمد من قاعدة البيانات ومعلومات التطبيق باستخدام PDO.
طبقة الوسائط
يتم التحقق من صحة الصور ومقاطع الفيديو المُحمّلة، وتخزينها، وربطها بإدخالات المحتوى الصحيحة.
طبقة الإدارة
تدير وظائف الإدارة المُصادق عليها المستخدمين المصرح لهم بالوصول إلى نظام إدارة المحتوى (CMS) وتعديل محتوى الموقع الإلكتروني.
تقوم واجهات PHP بعرض الموقع الإلكتروني ثنائي اللغة بشكل طبيعي.
طبقة التفاعل مع نظام إدارة المحتوى (CMS)
تكتشف جافا سكريبت العناصر القابلة للتعديل وتتعامل معها:
أحداث النقر بزر الماوس الأيمن/قائمة السياق
تحديد العنصر
تحرير النصوص
استبدال الصور
استبدال مقاطع الفيديو
جلب طلبات واجهة برمجة التطبيقات (API)
تحديث الصفحة المعروضة بعد إتمام التغييرات بنجاح.
طبقة تطبيق PHP
تستقبل نقاط نهاية PHP طلبات نظام إدارة المحتوى (CMS) وتنفذ ما يلي:
التحقق من المصادقة
التحقق من صحة الطلب
تحديثات المحتوى
معالجة الملفات
عمليات قاعدة البيانات
استبدال الوسائط.
طبقة البيانات
يخزن MySQL المحتوى المُستمد من قاعدة البيانات ومعلومات التطبيق باستخدام PDO.
طبقة الوسائط
يتم التحقق من صحة الصور ومقاطع الفيديو المُحمّلة، وتخزينها، وربطها بإدخالات المحتوى الصحيحة.
طبقة الإدارة
تدير وظائف الإدارة المُصادق عليها المستخدمين المصرح لهم بالوصول إلى نظام إدارة المحتوى (CMS) وتعديل محتوى الموقع الإلكتروني.
التحديات الفنية
بناء نظام تحرير مُراعي للسياق
كان أحد التحديات التقنية الرئيسية هو ربط العناصر المرئية المعروضة في واجهة المستخدم بالمحتوى المُخزّن المُناسب لها.
كان على نظام إدارة المحتوى (CMS) تحديد النص أو الصورة أو الفيديو الذي اختاره المسؤول بدقة، وربط هذا العنصر بالمحتوى المُخزّن الصحيح.
تتولى لغة جافا سكريبت التفاعل مع قائمة السياق وتحديد العنصر القابل للتحرير، بينما يقوم نظام PHP في الواجهة الخلفية بمعالجة التغيير المطلوب وحفظه.
دعم أنواع المحتوى المختلفة
تتطلب تحديثات النصوص واستبدال الوسائط سير عمل مختلفًا.
لذا، كان على نظام إدارة المحتوى التمييز بين أنواع المحتوى وتوفير تجربة التحرير المناسبة ومعالجة الواجهة الخلفية لكل نوع.
الحفاظ على تجربة التحرير عبر اللغات
نظرًا لأن الموقع يدعم اللغتين الإنجليزية والعربية، كان على نظام إدارة المحتوى أيضًا ربط التعديلات بنسخة اللغة الصحيحة مع الحفاظ على بنية الصفحة نفسها.
تصميم نظام تحرير سهل الاستخدام للمستخدمين غير التقنيين
كان الهدف الأهم في تجربة المستخدم هو تبسيط فهم المسؤولين لهيكل نظام إدارة المحتوى.
بدلاً من:
لوحة التحكم ← الصفحات ← البحث عن صفحة ← البحث عن قسم ← البحث عن حقل ← تحرير
يصبح سير العمل كالتالي:
فتح الصفحة ← البحث عن محتوى ← النقر بزر الماوس الأيمن ← تحرير
كان أحد التحديات التقنية الرئيسية هو ربط العناصر المرئية المعروضة في واجهة المستخدم بالمحتوى المُخزّن المُناسب لها.
كان على نظام إدارة المحتوى (CMS) تحديد النص أو الصورة أو الفيديو الذي اختاره المسؤول بدقة، وربط هذا العنصر بالمحتوى المُخزّن الصحيح.
تتولى لغة جافا سكريبت التفاعل مع قائمة السياق وتحديد العنصر القابل للتحرير، بينما يقوم نظام PHP في الواجهة الخلفية بمعالجة التغيير المطلوب وحفظه.
دعم أنواع المحتوى المختلفة
تتطلب تحديثات النصوص واستبدال الوسائط سير عمل مختلفًا.
لذا، كان على نظام إدارة المحتوى التمييز بين أنواع المحتوى وتوفير تجربة التحرير المناسبة ومعالجة الواجهة الخلفية لكل نوع.
الحفاظ على تجربة التحرير عبر اللغات
نظرًا لأن الموقع يدعم اللغتين الإنجليزية والعربية، كان على نظام إدارة المحتوى أيضًا ربط التعديلات بنسخة اللغة الصحيحة مع الحفاظ على بنية الصفحة نفسها.
تصميم نظام تحرير سهل الاستخدام للمستخدمين غير التقنيين
كان الهدف الأهم في تجربة المستخدم هو تبسيط فهم المسؤولين لهيكل نظام إدارة المحتوى.
بدلاً من:
لوحة التحكم ← الصفحات ← البحث عن صفحة ← البحث عن قسم ← البحث عن حقل ← تحرير
يصبح سير العمل كالتالي:
فتح الصفحة ← البحث عن محتوى ← النقر بزر الماوس الأيمن ← تحرير
الدروس المستفادة
أكد لي هذا المشروع أهمية اختيار بنية التطبيق بناءً على المشكلة الفعلية بدلاً من استخدام أكبر Framework متاح بشكل تلقائي.
يمكن لتطبيق مبني باستخدام PHP Native أن يكون منظماً وسهل الصيانة إذا تم فصل المسؤوليات مثل قاعدة البيانات والمحتوى والوسائط والـ Routing وعرض الصفحات بشكل صحيح.
كما اكتسبت خبرة أكبر في تصميم تطبيقات متعددة اللغات يكون فيها المحتوى جزءاً من بيانات النظام وليس مجرد نص ثابت داخل صفحات HTML.
ساعدني تطوير Inline CMS أيضاً على فهم أهمية تصميم أدوات الإدارة بناءً على طريقة استخدام العميل الفعلية. السماح للعميل بتعديل الصفحة التي يشاهدها مباشرة يوفر تجربة أبسط بكثير من إجباره على تعلم لوحة CMS تقليدية.
كما عزز المشروع خبرتي في إدارة الملفات بشكل آمن، Authentication، PDO، الاتصال غير المتزامن باستخدام JavaScript، دعم RTL، بيئات التطوير المختلفة، ونشر تطبيقات PHP مخصصة على الاستضافات التقليدية.
يمكن لتطبيق مبني باستخدام PHP Native أن يكون منظماً وسهل الصيانة إذا تم فصل المسؤوليات مثل قاعدة البيانات والمحتوى والوسائط والـ Routing وعرض الصفحات بشكل صحيح.
كما اكتسبت خبرة أكبر في تصميم تطبيقات متعددة اللغات يكون فيها المحتوى جزءاً من بيانات النظام وليس مجرد نص ثابت داخل صفحات HTML.
ساعدني تطوير Inline CMS أيضاً على فهم أهمية تصميم أدوات الإدارة بناءً على طريقة استخدام العميل الفعلية. السماح للعميل بتعديل الصفحة التي يشاهدها مباشرة يوفر تجربة أبسط بكثير من إجباره على تعلم لوحة CMS تقليدية.
كما عزز المشروع خبرتي في إدارة الملفات بشكل آمن، Authentication، PDO، الاتصال غير المتزامن باستخدام JavaScript، دعم RTL، بيئات التطوير المختلفة، ونشر تطبيقات PHP مخصصة على الاستضافات التقليدية.
معرض الصور
