10 مفاهيم وتقنيات يجب أن يعرفها أي مطور ويب

مقدمة :

في هذه المقالة ستتم الإضاءة على 10 مفاهيم مهمة جدا لأي مطور ويب بغض النظر عن اللغة التي يستخدمها لبناء تطبيقاته أو إطار العمل الذي يستخدمه , لنتعرف على هذه الـ 10 أشياء :

1- الأساسيات في تطوير الويب وهي HTML/ CSS / Javascript:

تعتبر اللغات الثلاثة الأساس لأي موقع ويب مهما كانت وظيفته أو تصنيفه تطبيق صغير أو كبير , لذلك كل مطورين الويب يجب أن يكون لديهم الالمام بالأساسيات .
وفيما يخص Javascript إن لم تكن مطور javascript فيمكن الالمام بمفاهيم اللغة الأساسية مثل التعامل مع عناصر Dom ولكن اذا كنت ترغب أن تكون MEAN/MERN Developer أو Front-End Developer يستخدم أحد أطر عمل جافاسكريبت مثل Angular , Vue,React فمن المؤكد يجب الالمام بمفاهيم أوسع والغوص أكثر في Javascript .

2- Git/Github :
Git هو نظام للتحكم بالاصدارات Version Control System يمكن Git المطورين من تحقيق أمثل لمبدأ التعاونية حيث يستطيع المطورين العمل على المشروع الواحد بنفس الوقت ومن ثم رفع الأجزاء البرمجية التي قاموا بكتابتها الى مستودعات أكواد Repositories دون حدوث تضارب والذي يمكن أن يحدث بحالة تناقل الملفات بطريقة كلاسيكية بعد كل تعديل .

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

أما Github فهو موقع يتيح لك إنشاء مستودع أكواد repository واستضافة مشاريعك المفتوحة المصدر عليه .
يحوي Github خاصية المستودعات الخاصة Private والتي تمكنك تحديد من يستطيع الوصول والمشاركة بالمشروع والحفاظ على خصوصيته .
في السابق كانت هذه الميزة مدفوعة ولكن بعد استحواذ مايكروسوفت على Github اصبحت ميزة المستودعات الخاصة مجانية , ولكن مع محدودية في بعد الدول – الجمهورية العربية السورية مثلا 🙁 –

هل Github هو الموقع الوحيد الذي يقدم خدمة استضافة الأكواد مفتوحة المصدر والتي يمكن أن استخدامه مع
Git ؟
الجواب هو لا بالطبع , يوجد العديد من البدائل ولعل أهمها Gitlab والذي يوفر ميزات Github جميعها , ويمكن إنشاء مستودعات خاصة وبشكل مجاني وغير محدود .

3- Browser DevTools :

وهي مجموعة أدوات يوفرها متصفح الانترنت يمكن الاستفادة منها في عملية تتبع التطبيق في مرحلة التطوير وحتى في مرحلة الإطلاق والاختبار .
وهي متشابهة تماما في المتصفحين الأكثر شهرة Chrome & Firefox ولكن كيف يمكنني الوصول الى هذه الأدوات ؟

يمكن الوصول لهذه الأدوات من خلال الخيارات ومن ثم أدوات المطور Developer Tools او بمجرد الضغط بالزر الأيمن ضمن الصفحة التي نريد استخدام هذه الأدوات عليها ومن ثم اختيار Inspect .

ماذا توفر هذه الأدوات ؟ وكيف يمكن استخدامها ؟

تقسم هذه الأدوات الى أجزاء عدة منها مايختص بالتصميم مثل Element حيث يمكن أن نلاحظ فيها عناصر HTML وخواص CSS المطبقة عليها .
ومنها ما يختص بجافا سكريبت وأخطاءها أو تنفيذ أوامر جافاسكريبت مباشرة كما في التبويب Console
أما القسم Network فهو يوضح الطلبات التي تقوم الصفحة بانشاءها والوقت المستغرق في الحصول على هذه الطلبات وحالتها (موجودة , غير موجودة , …) باختصار يمكن تلخيص وظيفة هذه التبويب بمتابعة طلبات HTTP الخاصة بهذه الصفحة .
في التبويب Performance يمكن اجراء اختبار أداء للصفحة أو التطبيق .
في التبويب Application يمكن متابعة الملفات التي يقوم التطبيق بتخزينها على جهاز العميل مثل Coockies Local Storage الجلسات وغيرها
تساهم هذه الأدوات بالاضافة للأدوات المتبقية بعمليات اختبار أسرع ومتابعة أدق لذلك يجب على أي مطور ويب استخدام هذه الأدوات .

4- الاتصال مع API والاستفادة من خدماته :
Application Programming Interface يمكن تعريفها بشكل مختصر أنها واجهة نستطيع التواصل من خلالها مع تطبيق آخر بغرض الحصول على معلومات منه أو الاستفادة من أحد خدماته .

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

في المواقع الحديثة غالبا ما نشاهد الخيار تسجيل الدخول باستخدام Facebook أو Google يتم ذلك أيضا بالاستفادة من API تسجيل الدخول التي تقدمها هذه المواقع
تسجيل الدخول باستخدام facebook
تسجيل الدخول باستخدام Google

5 – بناء API وليس فقط استخدامها والتعامل مع CRUD :
في حال كان تطبيقك يقوم بتقديم خدمة لجهة خارجية يجب هنا تقديم الخدمة على شكل واجهة برمجية API أو حتى في التطبيقات الحديثة والتي تستخدم المفهوم Single Page Application يتم استخدام الواجهات المكتوبة ضمن الموقع نفسه وذلك من أجل التحميل غير المتزامن .
المفهوم CRUD هو اختصار لـCreate Read Update Delete وهي العمليات التي يمكن تنفيذها على أي مورد موجود ضمن قاعدة بيانات الموقع .


6 – المصادقة Authentication :
بالطبع تحتاج معظم تطبيقات الويب مصادقة وتخويل للمستخدمين ,وهو مهم من أجل متابعة نشاط المستخدمين في حالة كان المستخدمين يستطيعون انشاء الموارد , المقالات مثلا فمن المهم أن يتم تحديد أي مستخدم قام بانشاء المقالة .
ويمكن أن يتم تحديد صلاحيات أكثر للمستخدمين وبمجرد عملية المصادقة يتم معرفة صلاحيات المستخدم .
توفر غالبية أطر العمل أدوات ونظم مصادقة أكثر امانا وبمجهود قليل على سبيل المثال في اطار العمل Laravel يمكن انشاء نظام مصادقة بكتابة التعليمة التالية في سطر الأوامر الخاص بـLaravel :
php artisan make:auth
وهذا كل شيء , رائع جدا 🙂

7 – Model View Controller


وهو نموذج تصميمي architecture pattern يقوم بتقسيم التطبيق إلى نماذج Models وتعنى بعمليات الاتصال مع قاعدة البيانات , Views وهي واجهة المستخدم يمكن أن تكون صفحات HTML عادية أو Server Render في حالة استخدام Front-End Framework , متحكمات Controllers وهي القسم الذي يحوي منطق التطبيق وهو الذي يتحكم بطلبات المستخدم ويقرر على أساسها ماذا يتوجب على التطبيق أن يفعل جلب بيانات اظهار صفحة ادخال بيانات …..
نقطة الانطلاق لأي تطبيق MVC هي Routing System اي أن المستخدم يحدد طريق Route من التطبيق وهذا الطريق مرتبط بمتحكم وبدوره هذا المتحكم يقوم بعمليات محدد كما سبق يمكن ان يجلب بيانات من قاعدة البيانات من خلال نموذج Model ومن ثم يقوم المتحكم بعرض صفحة للمستخدم View .
معظم أطر العمل تعمل بالنموذج MVC .

8- مهارات حل المشكلات والبحث Problem Solving & Searching :

من المفترض أن أي مطور يكون لديه مهارات حل المشاكل بطبيعته ومن المهم استخدام هذه المهارات في التطبيقات التي سيتم تطويرها وذلك لمنح التطبيق فعالية أكبر من خلال استخدام خوارزميات وبنى معطيات مناسبة للمشكلة المطروحة .
وأيضا من المهم اكتساب مهارة بحث جيدة الأمر الذي يساهم بحل المشكلات أو حتى من أجل الحصول على أكواد وأجزاء قمت بكتابتها سابقا بوقت أسرع , Google & Stackoverflow صديق لأي مطور 🙂


9- كتابة الاختبارات Writing Tests :

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


10 – DevOps & Deployment :

DevOps هو مصطلح واسع ويوجد مهندسين DevOps ولكن كمطور ويب يمكن أخذ القسم Deployment والصيانة وامكانية التوسع من المفهوم الواسع DevOps وهذه المفاهيم تعنى بنشر التطبيقات ومتابعتها ليس من مهام مطور الويب صيانة المخدمات وموازنة الحمل عليها مثلا !.
لذلك من المهم لمطور الويب التعامل مع المنصات السحابية المختلفة والاستفادة من خدماتها أشهر هذه المنصات AWS و Digital Ocean .
على سبيل المثال المنصة Digital Ocean تقدم مخدمات Linux فارغة (لاتحوي الا نظام تشغيل بدون أي خدمات ) ويقدم Droplets يمكن استخدامها لتثبيت التطبيقات والخدمات على هذا المخدم على سبيل المثال من خلالها يمكن تثبيت أي مخدم نرغب Apache,NGIX أو أي لغة أو إطار عمل وغيرها .