عبدالله المحسن
عبدالله المحسن
الموقع الإلكتروني لشركة بيت المهندس الصناعي (IE Home) تم تطوير الموقع باستخدام Next JS للواجهة الأمامية وتصميم الصفحات باستخدام Tailwind CSS. يعتمد المشروع على نظام إدارة المحتوى Strapi لإدارة المحتوى الخاص بالمدونة وبعض أقسام الموقع بكفاءة، مع استخدام Postgres كقاعدة بيانات تدعم Strapi لتخزين البيانات.
عبدالله المحسن
شكراً لـ(IE Home) على إعطائي هذه الفرصة في تطوير الموقع الإلكتروني! من خلال هذا المشروع...مررت بعدة تحديات وصعوبات ولكن بعد الله عزَّ وجّل, هذه التحديات والصعوبات كانت طريقاً للتجربة والمحاولة والتطور والتعلم!
تم تطوير الموقع باستخدام Next JS للواجهة الأمامية وتصميم الصفحات باستخدام Tailwind CSS. يعتمد المشروع على نظام إدارة المحتوى Strapi لإدارة المحتوى الخاص بالمدونة وبعض أقسام الموقع بكفاءة، مع استخدام PostgreSQL كقاعدة بيانات تدعم Strapi لتخزين البيانات.
في البداية قمت بإنشاء المشروع بإستخدام React و Tailwind CSS كــ إطار عمل CSS لتصميم الصفحات. بالنسبة للصفحات الثابتة والتي تُستخدم لعرض المحتوى فقط, كان الأمر إعتيادياً...لكن إحدى متطلبات IE Home كانت هي إنشاء مدوّنة في الموقع الإلكتروني. والمدوّنة تحتاج نظام لإدارة المحتوى (CMS). الموضوع كان جديداً عَلّي ولم تكن لدي دراية سابقة بأنظمة إدارة المحتوى...كيف سأقوم بإنشاء المدوّنة؟ وكيف يمكن للكتّاب الكتابة ونشر التدوينات عبر المدوّنة؟ هل سأحتاج لإنشاء قاعدة بيانات جديدة من الصفر؟ وغيرها من الأسئلة.
وبعد بحث...وبما أن الـ Front-End أو الواجهة الأمامية يُستخدم فيها React, فلابد من استخدام Headless CMS وليس استخدام نظام إدارة محتوى تقليدي أو Traditional CMS مثل WordPress وغيره, لإن نظام إدارة المحتوى التقليدي غالباً يحتوي على نظام كامل يحتوي على الواجهة الأمامية (Front-End) و وواجهة خلفية (Back-End) , وبما أن موقع IE Home الإلكتروني يستخدم React (أو Next JS فيما بعد) , فلا يمكن استخدام الـ Traditional CMS. في الجانب الآخر الـ Headless CMS يحتوي على العديد من المميزات الفارقة عن الـ Traditional CMS, مثل المرونة العالية وقابلية التخصيص واستخدام ونشر المحتوى على منصات وتقنيات مختلفة مثل المواقع الإلكترونية وتطبيقات الجوال وغيرها وذلك من خلال الربط بإستخدام واجهة برمجة تطبيقات (API) لجلب المحتوى واستخدامه بأي طريقة.
أحد أفضل الخيارات التي وجدتها هي Strapi وهو Headless CMS مفتوح المصدر, ويعطي Strapi حرية الاختيار لمكان استضافة نظام إدارة المحتوى, إما أن تقوم بإستضافته على السحابة أو Cloud الخاصة بهم بأسعار متفاوتة, أو تقوم بإستضافته على سيرفر خاص بك (Local Hosted) مجاناً بالكامل وبلا أي حدود للإستخدام! Strapi يحتوي على العديد والعديد من الميزات مثل الواجهة البسيطة لتحرير المحتوى ودعم العديد من الـ Plugins وغيرها. صور من لوحة التحكم في Strapi 👇
لذا بعد جولات من تخصيص Strapi ليكون مناسباً للمدونة وربطه بالواجهة الأمامية بـ React ظهرت إحدى التحديات التي لابد تجاوزها وهي أن إذا تم مشاركة رابط تدوينةٍ ما, وتم إرسال الرابط عبر واتساب مثلاً, من المفترض أن يظهر عنوان التدوينة وصورتها وهذه هي ما تُعرف بالـ Metadata الخاصة بصفحات المواقع الإلكترونية.
في React عندما يتم تصدير الموقع الإلكتروني لنشره للعامة, مهما كان عدد الصفحات ففي النهاية سيتم تصدير ملف HTML واحد فقط! وليس ملف HTML لكل صفحة. React هو إطار عمل “الصفحة الواحدة” أو Single Page Application (SPA) لذا يتم تحميل صفحة HTML واحدة فقط عند دخول الموقع الإلكتروني, وعند التنقل بين الصفحات داخل الموقع، يتم تحديث المحتوى والصفحات من خلال ملفات الــ JavaScript دون إعادة تحميل الصفحة. هذه المشكلة تؤدي إلى قلة الوصول لصفحات الموقع من خلال محركات البحث وتقليل التحسين لمحركات البحث أو Search Engine Optimization (SEO)
إحدى التحديات في المشروع هي...أين وكيف سيتّم نشر المشروع (Deploy)؟ في السابق وقت ما كان المشروع يستخدم React كان الأمر إعتيادياً, كل ما تحتاجه هو أن تقوم ببناء المشروع (Build Project) وببساطة نشره من خلال أحد مواقع الإستضافة الإعتيادية كــ Hostinger وغيرها. ولكن...بما أن المشروع يستخدم Next JS سيكون الأمر صعب للغاية لإستخدام مواقع الإستضافة الإعتيادية (Shared Hosting) لعدة أسباب منها أن Next JS يستخدم Node.js للـ Runtime ولتشغيل أكواد الـ Server-Side Rendering وأيضاً مواقع الإستضافة الإعتيادية تضع قيوداً لإستخدام الموارد في سيرفراتهم, وNext JS إطار مستهلك للموارد بعض الشيء. لذلك لابد من استخدام طريقة مختلفة لنشر المشروع (Deploy).
لذلك أحد أفضل الحلول التي يمكن نشر مشروع Next JS من خلالها هو الـ Virtual Private Server (VPS). الـ VPS هو نوع من خدمات الاستضافة التي تُتيح للمستخدم استئجار جزء من سيرفر فعلي يتم تقسيمه افتراضيًا إلى عدة خوادم صغيرة مستقلة. كل سيرفر افتراضي (VPS) يعمل ككيان (أو كــ سيرفر) مستقل تمامًا، وله نظام تشغيل خاص به، ومساحة تخزين، وموارد مثل المعالج والذاكرة (RAM).
الـ VPS يوفر لك مرونة في التخصيص وأداء وأمان عالي واستقلالية بالموارد (مثل المعالج ومساحة التخزين و الـ RAM) وكأنك تملك سيرفر فيزيائي حقيقي في بيتك أو شركتك لكن بسعر أقل.
الـ VPS غالباً يعمل على إحدى توزيعات نظام لينكس, وغالباً لا يحتوي على واجهة رسومية (GUI). لذلك أغلب التعاملات معه ستكون من خلال الوحدة الطرفية (الـ Terminal).
التعامل مع الـ VPS ليس بسيطاً دائماً بما أنه غالباً لا يحتوي على واجهة رسومية ونظام التشغيل معتمد على لينكس. بالنسبة لي سبق لي استخدام لينكس واستخدام الــ Terminal الخاص به ولو كان ليس استخداماً عميقاً ولكن ساعدني كثيراً في إعداد الــ VPS من الصفر والقيام بما يلزم لعمل Deploy لمشروع Next JS خلاله وايضاَ استخدامه لإستضافة نظام إدارة المحتوى Strapi.
وأخيراً قمت بعمل Webhook على الـ VPS, الـ Webhook هو ملف Javascript, يقوم هذا الــ Webhook بجلب أي تحديثات وأكواد جديدة من Github تلقائياً مع أي إصدار جديد, ثم إنشاء بناء جديد للمشروع (Project Build) للمشروع وثم نشره من جديد (Deploy) لتطبيق التحديثات الجديدة على الموقع الإلكتروني.
توجد أدوات أخرى تم استخدامها للمشروع كــ PM2 وهو مدير للعمليات أو Process Manager و أداة Nginx كــ Web Server يعمل على تلقي طلبات المستخدمين للوصول للموقع (ie-home.org على سبيل المثال) وتوجيه الطلبات لمشروع Next JS الذي يقوم PM2 بشتغيله وغيرها.
بشكل عام التعامل مع الــ VPS ليس تجربة ممتعة للغاية 🌚! ولكن كانت تجربة ملهمة ومفيدة للغاية, وتعطي درس على كيف أن لابد أن تتعامل مع الخيار الذي اخترته بكل مشاكله وصعوباته.
الرسم البياني الذي بالأسفل يعطي نظره عامة على هيكل المشروع من دخول المستخدم للموقع الإلكتروني إلى الــ Back-End و جلب التحديثات الجديدة للمشروع.
مره أخرى أشكر الله ثم IE Home على ثقتهم وإعطائي الفرصة لأنشاء هذا المشروع, الذي تعلمت منه الكثير و أتطلع لاستخدام هذه الخبرات في مشاريع مستقبلية بإذن الله!
كانت هذه التجربة ملهمة رغم الصعوبات، تعلمت خلالها كيفية التعامل مع التحديات التقنية وإيجاد الحلول المناسبة. المشروع كان خطوة كبيرة وأتاح لي اكتساب مهارات جديدة.
لا نستغني عن ملاحظاتكم واقتراحاتكم! ومنكم نستفيد! زوروا الموقع الإلكتروني 👇
صور من الموقع الإلكتروني لـ IE Home 👇
13 مشاهدة