السلام عليكم و رحمة الله تعالى و بركاته

لدي موقع شبيه لحسوب و medium أعمل على تطويره منذ مدة .. لم أنتهي منه بعد .. هذا رابط المعاينة

حاليا المنصة بها المميزات التالية :

• يمكنك التسجيل و تسجيل الدخول

• يمكنك إنشاء مقال (عنوان + إختر المجتمع + صورة إختيارية + المقال) و نشره

• الماركداون مبني من الصفر

• العضو يمكنه حذف/حفظ المقالات في المفضلة

• العضو يمكنه متابعة/إلغاء متابعة أعضاء آخرين

• نظام التعليقات مبني من الصفر

• العضو بإمكانه إنشاء مجتمعات

• حائط المقالات به صنفين (مواضيع جديدة / مواضيع الأكثر إعجابا)

• الموقع ريسبونسف و صديق للجوالات

• بروفايل

• تعديل البروفايل

.. إلخ

المميزات التي في الطريق :

يمكنك الإطلاع عليها من هنا :

التقنيات المستخدمة :

• Html

• Css

• Vanilla JS

• XHR

• Node.js

• Express.js فرايموورك

• Mysql قاعدة البيانات

• Ejs template engine

• Passport.js لنظام التسجيل و تسجيل الدخول

• Express-validator لحماية مدخلات المستخدم

• bcrypt.js لتشفير كلمات المرور

• Moment.js لحساب الوقت

• Multer لرفع الملفات

• Sharp لتغيير حجم الصور

• Eruda أدوات المطور للموبايل

المدة المستغرقة في تطويره :

لا أعلم بالتحديد ﻷني إشتغلت عليه لمدة شهرين ثم إنقطعت عنه ثم عدت و إنقطعت عنه مجددا ثم عدت .. إلخ

ربما 4 أشهر يتخللها بعض الإنقطاعات

القصة و بعض الفوائد :

أثناء رحلتي في تعلم تطوير الويب قررت صنع منصة شبيهة بحسوب و لكن مع إضافة بعض المميزات من مواقع أخرى مثل Medium .

الهدف كان التعلم ﻷني كنت جديد جدا جدا على ال Backend بحكم أني أمضيت 6 أشهر التي قبلها في ال Frontend ... البداية كانت بتعلم شيئ جديد و توظيفه في المنصة كل مرة .. يعني تعلم + و ظف هكذا ودواليك .. + قراءة المقالات من موقع medium و dev.to

المهم بعد شهر من العمل عليه أصبحت أتقن التعامل مع بعض التقنيات كالفرايموورك و الروتينغ و ال mysql passport.js ..إلخ .. و على ذكر ذلك في تلك الفترة التي كنت أطور فيها المنصة كنت أعمل بحارا .. و كنت أستمر في تطوير الموقع من الهاتف إذا لم تخني الذاكرة .. البرنامج المستخدم كان Termux .. و هو نفسه الذي إستخدمته لجعل الهاتف ريسبونسف .. يعني جعلت الهاتف ريسبونسف من الهاتف و ليس الكمبيوتر

بعد شهرين من التعلم و توظيف المهارات الجديدة عليه إنقطعت عنه .. بحكم أني أصبحت أعمل في محل المواد الغذائية التي أصبحت تأخذ معظم وقتي .. كان هناك فراغات كنت أستغلها في التطوير أيضا .. الشهر الفائت رجعت لتطويره مجددا .. لكن هذا الشهر تخللته الكثير من الفوائد منها

• تحسنت قدراتي في الجافاسكريبت و ES6

• تعرفت على طريقة Paulirish Dom Based Routing .. المشكلة التي وقعت فيها هو أن هنالك عناصر محددة أقوم بإستدعائها لتقوم بدالة معينة في الجافاسكريبت و لكن تلك العناصر غير موجودة في الصفحات الأخرى , فتظهر لي الكثير من أخطاء ال undefined في ال console .. قمت بحلها بال if statements و ذلك عبر التأكد من الصفحة و تشغيل تلك الأكواد فقط عليها و ليس في الصفحات الأخرى لكن حدثت مشاكل أخرى كتشابه أسماء الصفحات .. المهم بحثت عن طرق أخرى لحل المشكلة و إستقريت على طريقة Paulirish التي تستخدمها Wordpress حاليا في تنظيم ملفات الجافاسكريبت على مواقعها .

• إطلعت على Design Patterns و هذا أثبت لي أني متخلف بسنين ضوئية عن البرمجة الحقيقية .. و التي تستخدم الآن في تطوير البرمجيات الكبيرة .. يوجد على الأقل 23 نمط تصميم .. الهدف من هذه الأنماط حل مشكلات حقيقية ستواجهها أثناء تقدم مشاريعك سواء من ناحية ال Performances لموقعك أو Errors التي ستحدث لك بعد ال Production و التي لن تظهر لك وقت ال Developement .. و أيضا من ناحية التكويد .. نعم , الكود يجب أن يكون سهل القراءة و الفهم و مقسم لأجزاء صغيرة و كل جزء يقوم بعمل محدد و أيضا يجب أن يوافق مبدأ ال Depedency injection التي تعتمد عليها ال Unit tests .. وهذا يأخذنا لمبادئ تكويد أخرى

• مبادئ ال SOLID principles .. كل حرف في كلمة SOLID له معنى

  • S - Single-responsiblity Principle :

بمعنى أن الدالة يجب أن يكون لها سبب واحد للتغيير , بمعنى method واحدة في كل دالة .. في أكوادي السابقة ال function الواحدة كان بداخلها العديد من الأعمال مثلا

قبل

بعد

- O - Open-closed Principle :

مفتوحة للإضافات و مغلقة للتغييرات بمعنى أن الإضافة في الدالة أو الكلاس لا يجب أن يترتب عنه تغيير في البنية الداخلية للدالة/الكلاس .. لأنه لو تغيرت البنية الداخلية للدالة فسيترتب عنه تغييرات أخرى في أماكن أخرى من الكود التي تعتمد مباشرة على تلك الدالة .. بإختصار تقوم بتغيير دالة ثم تجد نفسك تقوم بعدة تغييرات أخرى في الكود بسبب تلك الدالة فهذا خاطئ .

- L - Liskov Substitution Principle :

هذه من مفاهيم الوراثة .. الكلاس الإبن يجب أن يستطيع بالقيام بما يستطيع أبوه القيام به .. بمعنى لو أن لدينا classA لأب و classB الإبن .. الكلاس A يمكنه تحضير قهوة فالإبن أيضا يجب أن يستطيع تحظير القهوة .. مثل هذه المشاكل ستاقابلها عندما تكبر سلسلة ال inheritance فبالتالي أصغر كلاس يجب أن يكون بإستطاعته القيام بما قام به أبوه من دون تغيير

- I - Interface Segregation Principle : 

الكلاس يجب أن تحتوي على methods التي تكمل هدفه ..الهدف من هذا المبدأ هو جعل الكلاس يحتوي فقط على ال methods التي يحتاجها

- D - Dependency Inversion Principle : 

آخر مبدأ و هو التجريد .. المعنى منه هو تقسيم عمل معين لأعمال صغيرة .. فبدلا من دالة تقوم بعملين نقوم بتقسيمها إلى دالتين ثم دمجهما عند الحاجة .

• بعد الإنتهاء من مبادئ SOLID هنالك أيضا مبادئ أخرى مثل

• DRY الذي معناه لا تعد نفسك (نفس الكود) .. يعنى لو تكرر لديك كود معين كم من مرة فقم بجعله عبارة عن مولد و قم بمناداته أينما إقتظت الضرورة .

• مبدأ KISS معناه إجعلها بسيطة لدرجة الغباء .. حاول جعل أكوادك تقوم بعملها من دون تعقيد في بنيتها الداخلية .. يجب أن تكون بسيطة التركيب

• مبدأ YAGNI .. أنت لا تحتاجها .. هذا المبدأ يجعلك تفكر مليا قبل إضافة شيئ .. إذا أمكنك فعل شيء بسيط من دون الإعتماد على مكتبة كاملة , فلما تستخدم تلك المكتبة إذا ؟

• مبدأ TDD : Test Driven Developement .. طريقة آليته هي أن تكتب Test للدالة المراد إنشاؤها قبل إنشائها .. بمعنى تتوقع ما ستعيده لك تلك الدالة ثم على أساس ذلك التوقع تقوم بإنشاء الدالة .. كمثال لذلك فلنفرض أننا نريد إنشاء دالة تقوم بحساب عمر شخص معين وذلك بأن نعطيها السنة الحالية و سنة ميلاد الشخص و هي تقوم بعملية حسابية ثم ترجع لنا الناتج .. لاحظ لم نكتب أي سطر برمجي بعد .. أولا نحظر الTest

كما ترى في الصورة قمنا بتحضير الإختبار أولا و لم نكتب الدالة بعد , ولو قمنا بتشغيل الإختبار فسينتج عنه خطأ لأن الدالة غير موجودة بعد .. الآن نقوم بإنشاء الدالة

الآن بعدما قمنا بإنشاء الدالة نقوم بتشغيل الإختبار الذي سيعيد لنا إما true التي تعني أن دالتنا تقوم بعملها بالشكل الصحيح , أو تعيد لنا false فنقوم بتصحيح الخطأ في لحظته بدل إكتشافه بعد مدة لو أننا لو نقم ال test .. هناك عدة مكتبات تقوم بعمل unit test .

لهذه الطريقة عدة مزايا أولا أنها تفرض علينا العمل بعدة مبادئ مثل مبدأ S الموجود في SOLID و أيضا Dependency Inversion وDependency Injection أو كما تسمى بحقن الإعتماديات ..إلخ

ثانيا أنها تعطي الثقة للمبرمج في أكواده بأنها تعمل بالشكل المطلوب .. و أيضا عند التعديل على جزء في أي كود من الأكواد مستقبلا فإننا نعلم ما يستقبله ذلك الجزء و ما يخرجه و ذلك بفضل ال tests التي تعمل الآن ك Documentation و أي تعديل نقوم به فقطعا لن يأثر على أي جزء آخر من المشروع

و في الأخير هذا ما مررت به حتى الآن بالإضافة إلى React.js و Redux و Gatsby بفضل الله و الحمد لله .

أتمنى أن تفيدكم هذه القصة التي وضفت فيها جملة من المبادئ لتسهيل فهمها و حثكم للبحث عنها و تعلمها .

أيضا أفكر في جعل المنصة مفتوحة المصدر إذا وجدت عدد لابأس به من ال Contributors

آراؤكم و أسإلتكم إن وجدت