يتضمن مجال تطوير الويب قسمين أساسين هما تطوير الواجهة الأمامية front-end (فرونت إند) وتطوير الواجهة الخلفية back-end (باك إند) وهما من المجالات الرائدة اليوم فجميع النشاطات التجارية والأشخاص يسعون للتواجد على شبكة الإنترنت ويحتاجون لمطوري ويب لإنشاء مدونات أو مواقع أو تطبيقات أو متاجر إلكترونية خاصة بهم.

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

ما هو تطوير الواجهة الأمامية Front End Web Development؟

قبل أن نشرح تطوير الواجهة الأمامية front-end تحتاج لأن تعرف مراحل بناء أي موقع إلكتروني، فإنشاء أي موقع أو تطبيق يبدأ بتحديد فكرته وتوثيقها، بعدها ترسل هذه الفكرة إلى مصمم الواجهات الأمامية الذي يرسم واجهات الموقع وصفحاته كلها بمختلف تفاصيلها وحالتها، حيث تُراجع هذه الواجهات ثم ترسل إلى مطور الواجهات لتكويدها وبرمجتها وهنا تقسم العملية إلى برمجة واجهات أمامية وخلفية وتبرمج كل واجهة وتتفاعل الواجهتان مع بعضهما للحصول على المواقع المتكامل.

فمطور الواجهة الأمامية front end web developer أو ما يعرف بمطور واجهات المستخدم user interface developer هو المبرمج المسؤول عن إنشاء كافة الأجزاء المرئية التي يراها المستخدم ويتفاعل معها عند زيارة مواقع وتطبيقات الويب وبرمجة كافة الواجهات ومكوناتها من أزرار وقوائم ونصوص ورسومات وصور ونماذج وغيرها وتحديد كيف سيبدو كل جزء من موقع الويب وكيف سيتفاعل المستخدم معه.

الفرق بين تطوير الواجهة الأمامية front-end وتطوير الواجهة الخلفية back-end والتطوير الكامل Fullstack

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

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

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

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

كل ما يتعلق بأمور عرض الموقع من جانب متصفح الويب أو يسمى طرف العميل client side يندرج تحت مجال تطوير الواجهة الأمامية للموقع، وكل ما يتعلق بأمور معالجة الموقع من طرف خادم الويب من معالجة البيانات وتخزينها وحفظها وإجراء عمليات عليها وغيرها يندرج تحت مجال تطوير الوجهة الخلفية للموقع ولكل منهما تقنياته وأدواته، على سبيل المثال عندما تسجل في موقع يطلب تاريخ ميلادك، تراه يعرضها لك أحيانًا بشكل عمر أي عدد وليس تاريخ، هذه المعالجة تُرسل عادة من طرف الخادم.

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

أما إذا كنت متحمسًا للقيام بكل ما سبق وكانت لديك القدرة لتعلم كافة التقنيات والمهارات اللازمة لتطوير الواجهة الأمامية وتطوير الواجهة الخلفية والقيام بالأمرين معًا عندها سيطلق عليك اسم المطور الكامل fullstack developer وستفتح أمامك الكثير من الفرص المجزية.

وإذا كنت مهتمًا بمعرفة مزيد من التفاصيل حول مجالات تطوير الويب أنصح بمطالعة مقال المدخل الشامل لتعلم تطوير الويب وبرمجة المواقع ومقال دليلك الشامل إلى تطوير الواجهة الخلفية Backend.

أهمية تطوير الواجهة الأمامية في سوق العمل

إذا كنت مهتمًا بتطوير الويب فدعني أخبرك أن تبدأ به دون تردد فهو واحد من أكثر مجالات العمل نموًا مقارنة بباقي الوظائف فبحسب استبيان عام 2022 لموقع ستاك أوفر فلو الشهير الذي يضم آلاف خبراء البرمجة حول العالم فإن 25.96% من المشاركين في الاستبيان وعددهم 61,302 متخصصون في تطوير الواجهة الأمامية front-end، ويحتل هذا المجال المرتبة الثالثة بين أنواع المطورين بعد تطوير الواجهة الخلفية back-end والتطوير الكامل full-stack وهذا إن دلَّ على شيء فإنما يدل على مدى أهمية هذا المجال والطلب المرتفع عليه.

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

الجدير بالذكر أن أصعب جزء في مجال تطوير الواجهة الأمامية هو أنه متجدد باستمرار لذا يحتاج المطور للاطلاع بصورة دائمة على أحدث التقنيات في تطوير الويب ليتمكن من الاحتفاظ بالصدارة في سوق العمل لكنه مجال مجزٍ ويستحق الجهد.

ما هي مهام مطور الواجهة الأمامية؟

مطور الواجهات الأمامية هو المسؤول بشكل عام عن إنشاء أجزاء المواقع والتطبيقات التي تعمل من جانب العميل (أو المتصفح)، وهذه المهمة تتضمن القيام بالعديد من المهام والتي تشمل:

• كتابة شيفرات HTML و CSS وجافا سكريبت لتنفيذ تصميم الموقع التي تكون عادة بشكل صور مصممة من قبل مصمم الواجهات الأمامية المسؤول عن تصميم واجهة المستخدم وتجربة المستخدم UI / UX بواسطة برامج متخصصة مثل فيجما Figma أو Sketch أو فوتوشوب.
• التواصل مع مطور الواجهة الخلفية المسؤول عن تحقيق وظائف الموقع والتأكد من توافق الواجهة الأمامية مع الواجهة الخلفية للموقع.
• تحسين أداء موقع الويب والتأكد من سرعة تحميله وتوفر تجربة مستخدم سهلة ومحسنة.
• التأكد من أن الموقع متوافق مع كافة متصفحات الويب ويعمل بالشكل الصحيح ومعالجة أي مشاكل توافق إن وجدت.
• التأكد من كون الموقع متجاوب ومتكيف مع كافة أحجام الشاشات بما في ذلك شاشات الهواتف الجوالة والأجهزة اللوحية وأجهزة الحاسوب.

أهم أدوات تطوير الواجهة الأمامية

إذا قررت التخصص في تطوير الواجهات الأمامية للويب ستجد الكثير من الخيارات المتاحة، فاللغات الثلاث الأساسية لأي مطور واجهة أمامية هي HTML و CSS وجافا سكريبت كما يمكنه إلى جانب ذلك استخدام العديد من اللغات وأطر العمل والمكتبات الأخرى الكثيرة التي تسهل عمله في تطوير الواجهات وفي الفقرات التالية سنسلط الضوء على أبرز هذه الأدوات.

أهم لغات برمجة الواجهة الأمامية

• HTML
• CSS
• جافا سكريبت JavaScript
• تايب سكريبت TypeScript

لنتناول بتفصيل أكثر كل لغة من هذه اللغات ودورها في تطوير الواجهات الأمامية للمواقع والتطبيقات.

لغة HTML

لغة HTML هي اختصار لعبارة HyperText Markup Language أي لغة ترميز النص التشعبي وهي اللغة الأساسية لتطوير الواجهة الأمامية للمواقع والتطبيقات وهي لغة وصفية أو لغة ترميز تصف البنية العامة لصفحات الويب ومحتوياتها من نصوص وأزرار وصور وقوائم باستخدام الوسوم وهي علامات موضوعة ضمن قوسي زاوية <> تحدد نوع المحتوى أو هيكليته

على سبيل المثال لإنشاء صفحة ويب تتضمن عنوان وصورة ونص نكتب كود HTML التالي:

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <title>عنوان الصفحة</title>
  </head>
  <body>
<h1>عنوان الصفحة</h1>
   <img id="myImage" src="html.png">
    <p> HTML هي اختصار لـHyperText Markup Language  أي لغة ترميز النص التشعبي وهي الأساسية لتطوير الواجهة الأمامية للمواقع والتطبيقات
</p>
  </body>
</html>

احفظ الكود أعلاه في ملف نصي باسم index.html وقم بعرضه في متصفح الويب، عندها ستظهر الصفحة بالشكل التالي:

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

لغة CSS

لغة CSS هي اختصار لـ Cascading Style Sheets وهي لغة تصميم تستخدم لتحديد تنسيق صفحة الويب واختيار الألوان والخطوط والخلفيات وما إلى ذلك كما أنها تستخدم في جعل مواقع الويب متجاوبة مع مختلف الشاشات من خلال كتابة شيفرات تغير تنسيق وتخطيط العناصر بحسب أبعاد الشاشة.

تستخدم لغة CSS قواعد تنسيق تستهدف عناصر HTML التي نريد تصميمها على سبيل المثال سنكتب التعليمات التالية لتنسيق صفحة الويب التي أنشأناها باستخدام HTML نكتب شيفرات CSS التالية ضمن الوسم <head>:

<style>
      body {
  font-family: 'Cairo', sans-serif;
  background-color: #f2f2f2;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 36px;
  color: #333;
  text-align: center;
  margin: 50px 0;
}

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

p {
  font-size: 18px;
  color: #666;
  text-align: center;
  margin: 50px;
  line-height: 1.5;
}
</style>

تظهر الصفحة بعد إضافة التنسيقات كما يلي:

وللمزيد من المعلومات يمكنك مطالعة سلسلة دروس CSS على أكاديمية حسوب إلى جانب توثيق CSS الشامل على موسوعة حسوب.

لغة جافا سكريبت JavaScript

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

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

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

لنفرض أنك تحتاج لتكبير حجم صور الموقع قليلًا عند مرور مؤشر الفأرة فوقها، لن تتمكن من هذا إذا لم تكن تعرف جافا سكريبت وتدمجها مع HTML و CSS

بدايةً عليك إضافة أكواد CSS التالية بعد الأكواد التي كتبتها في الخطوة السابقة:

.zoom {
  transition: transform .2s;
  /* Add any other styles you want */
}
.zoom:hover {
  transform: scale(1.5);
  /* Change the scale value to adjust the level of zoom */
}

وبعدها عليك أن تضيف أكواد جافا سكريبت التالية قبل الوسم </body> ضمن كود HTML:

const image = document.getElementById("myImage");
image.addEventListener("mouseover", function() {
  image.classList.add("zoom");
});

image.addEventListener("mouseout", function() {
  image.classList.remove("zoom");
});

تستمع شفرة جافا سكريبت هذه إلى حدث مرور مؤشر الفأرة فوق الصورة وتضيف تنسيق التكبير zoom إليه عند وقوع هذا الحدث. كما أنها تستمع إلى حدث خروج مؤشر الفأرة من عنصر الصورة وتزيل تنسيق التكبير منه عند وقوع هذا الحدث، وعند عرض الصفحة في المتصفح نحصل على التأثير التالي:

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

لغة TypeScript

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

يمكنك مطالعة المزيد من المعلومات حول هذه اللغة وإمكانياتها من خلال مجموعة دروس TypeScript المتوفرة على أكاديمية حسوب

أهم أطر عمل تطوير الواجهة الأمامية

ظهرت أطر العمل frameworks والمكتبات البرمجية لتسهيل عمل المطور وتسريع عمله، لذا ستحتاج لاستخدامها في سوق العمل بدلًا من كتابة كل شيء بيدك من الصفر، وأطر عمل الواجهات الأمامية كثيرة ومن أبرزها:

• بوتستراب Bootstrap
• رياكت React
• أنغولار Angular
• فيو Vue
• جي كويري jQuery

دعنا نلقي نظرة على كل تقنية منها ونشرح بمزيد من التفصيل دورها وأهميتها في تطوير الواجهة الأمامية.

بوتستراب Bootstrap

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

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

رياكت React

رياكت React هي مكتبة جافا سكريبت مفتوحة المصدر طورتها شركة فيسبوك عام 2013 وهي تعد اليوم واحدة من أشهر مكتبات تطوير الواجهة الأمامية التي يمكنك من خلالها إنشاء مكونات قابلة لإعادة الاستخدام وتطوير واجهات مستخدم متجاوبة بسرعة وسهولة.

يمكنك مطالعة المزيد حول هذه المكتبة وتعلم طريقة بناء واجهات المواقع والتطبيقات باستخدامها من خلال الدروس والمقالات الاحترافية حول React على أكاديمية حسوب وأيضًا توثيق React على موسوعة حسوب.

أنغولار Angular

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

كما يمكنك مطالعة المزيد من الدروس والمقالات الاحترافية حول Angular على أكاديمية حسوب لتتعرف على طريقة استخدامها في تطوير مواقع ويب احترافية.

فيو Vue

فيو Vue هو إطار عمل جافا سكريبت مفتوح المصدر طوره Evan You المبرمج في جوجل عام 2014 لتطوير واجهات المستخدم وتطبيقات الصفحة الواحدة وهو اليوم واحد من أكثر أطر عمل الواجهة الأمامية شيوعًا واستخدامًا.

ما يميز إطار فيو Vue أنه مرن وخفيف الوزن وسهل الاستخدام فقد أزال كل المكونات الإضافية والمفاهيم غير الضرورية التي تأتي مع أطر عمل الواجهة الأمامية الأخرى مثل أنغولار Angular ورياكت React.

وللمزيد من التفاصيل أنصح بمطالعة مقال مقارنة بين أطر الواجهات الأمامية: Angular و React و Vue لمعرفة الإطار الأنسب لمتطلباتك، كما أنصح بمتابعة الدروس والمقالات حول Vue التي توفرها أكاديمية حسوب بشكل دوري لتعلم المزيد حول استخدامات هذا الإطار.

جي كويري jQuery

جي كويري jQuery هي مكتبة مبنية بالاعتماد على لغة جافا سكريبت وهي توفر لمطوري الواجهة الأمامية الكثير من القوة والمرونة وتتضمن الكثير من الميزات التي تجعل كتابة شيفرات جافا سكريبت أبسط وأكثر اختصارًا.

لمعرفة المزيد حول طريقة استخدام مكتبة jQuery عند تطوير مواقع الويب أنصح بمطالعات مجموعة المقالات والدروس حول jQuery المتوفرة على أكاديمية حسوب، كما أنصح بمطالعة توثيق jQuery على موسوعة حسوب.

تقنيات وأدوات مهمة لتطوير الواجهة الأمامية

إضافة لما سبق، يحتاج أي مطور واجهة أمامية لقائمة طويلة من المعارف والمهارات والأدوات الإضافية التي تعزز أداءه وتساعده في تطوير واجهات المستخدم وتكويدها بسرعة واحترافية، وإليك قائمة بأبرز هذه الأدوات نذكر:

• شجرة DOM والتعامل معها.
• معرفة أساسية بالشبكات وشبكة الإنترنت وأشهر برتوكولات التواصل مثل HTTP.
• لمحة عن قواعد التصميم وأساسيات تصميم واجهات المستخدم وتجربة المستخدم UX/UI.
• التصميم المتجاوب responsive design مع كافة أحجام الشاشات.
• التوافق مع المتصفحات Cross-browser.
• واجهة برمجة التطبيقات API.
• لمحة عن Node.js وأنظمة إدارة الحزم تحديدًا npm.
• نظام التحكم في الإصدارات git.

شجرة DOM

من الضروري أن يعرف أي مطور واجهة أمامية مهارات التعامل مع نموذج كائن المستند Document Object Model أو اختصارًا DOM أو شجرة DOM ومعالجته عبر لغة جافا سكريبت، و DOM هو مجموعة من المواصفات التي تمثل مستند الويب بشكل كائن وتعد أحد الطرق الأساسية في بناء مواقع تفاعلية حيث أنها تنشئ واجهة برمجة تطبيقات API تسمح للغات البرمجة مثل جافا سكريبت بالوصول لكافة عناصر صفحات الويب ومعالجتها والتحكم بها.

ستساعدك معالجة DOM في تحديث بيانات الصفحة أو تغيير تخطيطها دون إعادة الحاجة لإعادة تحميلها على سبيل المثال يمكنك من خلال DOM إضافة عناصر HTML للصفحة أو إزالتها أو تعديل تنسيقات CSS لها عند وقوع حدث ما أو عند إعادة تحميل صفحة الويب.

معرفة أساسية بالشبكات

يحتاج مطور الواجهة الأمامية لامتلاك معلومات أساسية حول طريقة عمل الويب والشبكات الحاسوبية وشبكة الإنترنت ومفهوم العميل والخادم وكيفية التفاعل بينهما وبروتوكولات الاتصال عبر الويب مثل HTTP و HTTPS و SSL ومفهوم خدمة اسم المجال DNS فهذه المعرفة تمكنه من عرض واستدعاء المحتوى من الشبكة والاتصال مع الخادم بشكل آمن وتوفير تجربة مستخدم أفضل.

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

قواعد التصميم وأساسيات UX/UI

ذكرنا سابقًا أن مطور الواجهة الأمامية قد يكون مسؤولًا عن تصميم موقع ويب من الصفر أو قد يكون مسؤولًا عن تحويل التصاميم الجاهزة إلى شيفرات برمجية، لكن في كلتا الحالتين أجد أنه من الضروري لأي مطور واجهة أمامية أن يعرف أفضل النصائح والقواعد لتصميم واجهة المستخدم والمبادئ والقواعد الأساسية في تصميم تجربة المستخدم UX وتصميم واجهة المستخدم UI فهذا من شأنه أن يساعده على فهم الواجهات وكيفية تفاعل المستخدمين معها بشكل أفضل وكيفية إنشاء واجهات أكثر جاذبية وسهولة في الاستخدام وبالتالي سيتمكن من كتابة شيفرات الواجهة الأمامية بشكل أفضل ويضمن أنها مطابق للقواعد التصميمة الصحيحة.

التصميم المتجاوب مع كافة أحجام الشاشات

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

يحتاج مطور الواجهة الأمامية لمعرفة أساسيات تصميم الويب المتجاوب Responsive Web Design وطرق كتابة استعلامات الوسائط Media Queries في CSS بشكل صحيح كي يضمن ظهور المواقع بكفاءة على جميع أنواع وأحجام الأجهزة التي يستعملهما المستخدمون سواء الحواسيب ذات الشاشات الكبيرة أو الهواتف المحمولة ذات الشاشات الصغيرة.

التوافق مع المتصفحات Cross-browser

أحد المهارات الضرورية التي يجب على مطور الواجهة الأمامية تعلمها هو التأكد من أن الواجهات التي يبرمجها متوافقة مع مختلف المتصفحات وتظهر بشكل سليم ومتسق على المتصفحات الشهيرة مثل كروم وفايرفوكس وسفاري وEdge وOpera ويتعلم كيف يجري اختبارات التوافق مع المتصفحات cross-browser testing ويعالج أي مشكلات تواجهه في التوافق.

يمكنك الاستعانة ببعض الأدوات والتقنيات المساعدة في اختبار توافق المتصفح Cross-browser مثل Markup Validation Service و CrossBrowserTesting و LambdaTest …إلخ. لكن تجدر الإشارة بأن أطر عمل الواجهات الأمامية مثل رياكت React وأنجولار Angular يمكنها أن تقوم بهذه المهمة عنك ولن تجعلك تكترث لها، يكفي أن تحدد لها أي نوع متصفح تريد أن نستهدف وهي تتولى الأمر لأنها تعالج دومًا الشيفرة التي تكتبها.

استدعاء واجهة برمجة التطبيقات

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

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

تعلم Node.js وأنظمة إدارة الحزم

يحتاج مطور الواجهة الأمامية إلى تعلم أحد أدوات إدارة الحزم Package Manager التي تجعل عملية تطوير الواجهة الأمامية أسرع وأسهل، فأدوات إدارة الحزم هي برمجيات تسمح لك بتثبيت الحزم المطلوبة للتطوير وإعدادها وتحديثها وإدارة تبعياتها وضمان عدم تعارضها بشكل تلقائي بدلًا من القيام بذلك بشكل يدوي ومن أشهرها npm و Yarn.

وعادة يستعمل مطور الواجهات الأمامية مكتبة Node.js التي تأتي مع نظام إدارة الحزم الشهير npm والذي سيستعمله في تنزيل حزم المشروع وإدارتها ومكتبة Node.js هي أول أداة سيثبتها المطور على جهازه فبدونها لن يعمل مع لغة جافاسكريبت على الإطلاق، لذا يجب أن يتعرف عليها وعلى مدير الحزم npm.

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

نظام التحكم في الإصدارات git

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

تتوفر في أكاديمية حسوب مجموعة غنية ومنوعة من المقالات والدروس حول Git التي تساعدك في تعلم كافة المهارات اللازمة للتعامل مع نظام التحكم بالإصدارات Git.

كانت هذه التقنيات جزءًا يسيرًا من التقنيات والأدوات التي على مطور الواجهة الأمامية معرفتها، وفي الفقرة التالية سنوضح المزيد من هذه التقنيات ونضع لك خارطة طريق منظمة تساعدك في تعلم تعلم تطوير الواجهة الأمامية.

خارطة طريق تعلم تطوير الواجهة الأمامية

إليك خارطة طريق لتعلم مجال تطوير الواجهات الأمامية والذي يعرض بوضوح طريق مطور الواجهات الأمامية بالكامل بدءًا من المرحلة المبتدئة وحتى المتقدمة وأغلب تلك المواضيع تجد عنها في أكاديمية حسوب وموسوعة حسوب:

أهم مصادر تعلم تطوير الواجهة الأمامية

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

لن تكون وحدك خلال هذه الدورة بل سيكون معك فريق من المدربين لمساعدتك وإجابتك على أي تساؤل أو مشكلة تواجهك في رحلة التعلم، وفي نهاية الدورة ستحصل على شهادة معتمدة من أكاديمية حسوب تعزز سيرتك الذاتية.

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

وإن كنت تفضل الدراسة من الكتب بسبب شموليتها وتسلسلها في الشرح فإن الأكاديمية توفر لك مجموعة من الكتب القيمة التي تهم أي مطور واجهة أمامية من بينها:

• كتاب فهم أعمق لتقنيات HTML5
• كتاب ملاحظات للعاملين في CSS
• كتاب البرمجة بلغة جافا سكريبت
• كتاب تصميم تجربة المستخدم
• سلسلة تطوير الويب

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

الخلاصة

بهذا تكون وصلت إلى نهاية هذه المقالة الشاملة التي تناولنا فيها كل ما يتعلق بأساسيات تطوير الواجهة الأمامية front-end أو ما يعرف بتطوير واجهة المستخدم وتعرفنا على أهم اللغات وأطر العمل والأدوات التي تحتاجها كمطور واجهة أمامية لتنجز الجزء المرئي من الموقع الذي يتفاعل المستخدمون من خلاله مع التطبيقات والمواقع، كما شرحنا في ختامة أهم خطوات تعلم تطوير الواجهة الأمامية ومصادر تعلمها باللغة العربية.

وفي حال كان لديك أي سؤال يتعلق بتطوير الويب وتحديدًا تطوير الواجهات الأمامية للويب فلا تتردد في كتابته في قسم التعليقات أسفل المقال، أو طرحه في قسم الأسئلة والأجوبة في أكاديمية حسوب ليجيبك عليه مبرمجون خبراء.

اقرأ أيضًا

• المدخل الشامل لتعلم تطوير الويب وبرمجة المواقع
• برمجة مواقع الويب: دليلك المختصر
• ما الفرق بين تصميم المواقع الإلكترونية وتطوير المواقع الإلكترونية؟
• عالم الويب ومعاييره
• ما هي صفحات الويب؟

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

أنواع لغات البرمجة

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

• لغات البرمجة الإجرائية Procedural Programming
• لغات البرمجة الوظيفية Functional Programming
• لغات البرمجة الكائنية Object-Oriented Programming

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

إذا كنت مهتمًا بمعرفة المزيد من المعايير التي تصنف وفقها لغات البرمجة وأهم مميزات كل نوع يمكنك مطالعة مقال أنواع لغات البرمجة.

ما هي البرمجة الإجرائية Procedural Programming؟

البرمجة الإجرائية Procedural Programming هي أحد نماذج البرمجة التي تعتمد بشكل أساسي على إخبار الحاسوب بالمهام التي تريد منه القيام به بدقة وخطوة بخطوة من خلال كتابة إجراءات procedures أو دوال برمجية functions تؤدي كل منها مهمة محددة.

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

فالإجراءات procedures أو الدوال functions أو ما يعرف أيضًا البرامج الفرعية subroutines أو الوظائف هي عبارة عن كتل من التعليمات البرمجية لها اسم محدد تحصل على المدخلات من المستخدم وتعالجها بطريقة معينة لأداء المهمة المطلوبة ثم تعيد مجموعة من النتائج كمخرجات.

وتجدر الإشارة بأنه لا يتم تنفيذ تعليمات الإجراءات مباشرة عند كتابته بل يجب استدعاء الإجراء من خلال كتابة اسمه وتمرير قيم المتغيرات المناسبة له ليتم تنفيذ كتلة تعليماته البرمجية، بعبارة أخرى الإجراء البرمجي هو كتلة من التعليمات المجمعة بشكل وحدة واحدة والتي تؤدي مهمة محددة ويتم استخدامها في البرامج عند الحاجة لتنفيذ هذه المهمة المعينة.

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

أمثلة على لغات برمجة إجرائية

قد تدعم بعض لغات البرمجة نموذج البرمجة الإجرائية فقط، لكن في الغالب ستجد أن معظم لغات البرمجة تدعم أكثر من نموذج برمجة بذات الوقت للاستفادة من ميزات كل نموذج ومنح المبرمج مزيدًا من المرونة في كتابة برامجه على سبيل المثال تدعم لغة بايثون Python ولغة C++‎ كلًا من نموذج البرمجة الإجرائية والبرمجة كائنية التوجه بذات الوقت.

من الأمثلة الشائعة على لغات البرمجة الإجرائية نذكر:

• سي C: لغة برمجة إجرائية شهيرة تم تطويرها عام 1972 وتستخدم في العديد من المجالات أهمها تطوير نظم التشغيل والتطبيقات المضمنة وألعاب الفيديو.
• بيسك BASIC: لغة برمجة عالية المستوى تم تطويرها في عام 1964 بهدف جعل البرمجة سهلة التعلم والفهم للمبتدئين وكانت تستخدم لتطوير التطبيقات الإدارية البسيطة والبرامج التعليمية والألعاب.
• فورتران FORTRAN: من لغات البرمجة الإجرائية الشهيرة وهي أقدم لغة برمجة عالية المستوى طورت في خمسينيات القرن الماضي لتسهيل كتابة البرامج الرياضية والعلمية ولا تزال لليوم في المجالات العلمية والهندسية مثل التنبؤ بالطقس والفيزياء الحاسوبية والتحليل العددي.
• كوبول COBOL: لغة برمجة إجرائية قديمة عالية المستوى طورت بهدف تقديم لغة برمجة سهلة ومفهومة من قبل المبرمجين وهي لا تزال لليوم تستخدم في عالم الأعمال والمصارف (البنوك).
• الغول ALGOL: هي لغة برمجة إجرائية تستخدم لتطوير التطبيقات العلمية والهندسية وهي أول لغة برمجة أدخلت مفهوم الكتل البرمجية وسمحت بتداخل الإجراءات والدوال داخل بعضها البعض وتعد لغة مرجعية لتطوير معايير لغات البرمجة الأخرى.
• آدا Ada: لغة برمجة إجرائية صممت لتكون لغة آمنة وموثوقة للاستخدام في الأنظمة البرمجية المعقدة المستخدمة من قبل المنظمات الحكومية والمؤسسات الأكاديمية فهي تتضمن ميزات مثل الكتابة الصارمة ومعالجة الاستثناءات.
• باسكال Pascal: لغة برمجة عالية المستوى صممها عالم الحاسوب نيكلاوس ويرث بداية السبعينيات لتوفير لغة برمجة صارمة ومنظمة للمبتدئين في تعلم البرمجة، واستخدمت في البدايات لتطوير برامج معالجة البيانات وتطوير الألعاب وأثرت في تطوير العديد من لغات البرمجة الأخرى مثل دلفي وآدا.

مثال عملي لبرنامج مكتوب بأسلوب البرمجة الإجرائية

لتفهم البرمجة الإجرائية بشكل أفضل دعني أوضح لك الأمر بمثال عملي، إذا فكرنا بكتابة برنامج بلغة C لحساب المتوسط الحسابي لعلامات طالب ما، يمكن أن نفكر بكتابته مباشرة دون استخدام الإجراءات من خلال تخزين العلامات في مصفوفة ثم نستخدم حلقة for للتكرار خلال عناصر المصفوفة لحساب المتوسط وعرض قيمته ضمن البرنامج الرئيسي كما يلي:

#include <stdio.h>
int main() {
  int marks[] = {60, 70, 88, 95, 59};
  int size = sizeof(marks) / sizeof(marks[0]);
  int sum = 0;
  for (int i = 0; i < size; i++) {
    sum += marks[i];
  }
  float avg = (float)sum / size;
  printf("Average: %f", avg);
  return 0;
}

الآن لو احتجنا لحساب المتوسط الحسابي لدرجات طالب آخر سنحتاج لتعريف مصفوفة أخرى تتضمن علامات هذا الطالب ونكرر نفس الكود على المصفوفة الثانية ويصبح الكود كالتالي:

#include <stdio.h>
int main() {
  int marks1[] = {60, 70, 88, 95, 59};
  int size1 = sizeof(marks1) / sizeof(marks1[0]);
  int sum1 = 0;
  for (int i = 0; i < size1; i++) {
    sum1 += marks1[i];
  }
  float avg = (float)sum1 / size1;
  printf("Average1: %f", avg);

  int marks2[] = {76, 93, 78, 93, 86};
  int size2 = sizeof(marks2) / sizeof(marks2[0]);
  int sum2 = 0;
  for (int i = 0; i < size2; i++) {
    sum2 += marks2[i];

  }
  float avg2 = (float)sum2 / size2;
  printf("Average2: %f", avg2);
  return 0;  
}

والآن ماذا لو أردنا حساب متوسط درجات 100 طالب تخيل حجم تكرار الكود الذي سيحصل في البرنامج! لذا سيكون من الأفضل التفكير في تعريف إجراء أو دالة تغلف تعليمات حساب المتوسط ونعيد استخدامها في البرنامج الرئيسي عند الحاجة كما يلي.

لكتابة هذا البرنامج سنعرف إجراءً يسمى average()‎ يأخذ مصفوفة الدرجات كوسيط ويحسب هذا الإجراء حجم المصفوفة ومجموع كل العناصر في المصفوفة ويعيد المتوسط بقسمة المجموع على حجم المصفوفة.

وفي الدالة main()‎ التي تمثل البرنامج الرئيسي نكتفي بتعريف مصفوفات الدرجات ونمررها كوسطاء للدالة average()‎ لنحصل مباشرة على النتيجة المطلوبة.

#include <stdio.h>

float average(int arr[]);
int main() {
  int marks1[] = {60, 70, 88, 95, 59};
  int marks2[] = {76, 93, 78, 93, 86};
  printf("Average1: %f", average(marks1));
  printf("Average2: %f", average(marks2));
  return 0;
}

float average(int arr[]) {
  int size = sizeof(arr) / sizeof(arr[0]);
  int sum = 0;
  for (int i = 0; i < size; i++) {
    sum += arr[i];
  }
  return (float)sum / size;
}

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

خصائص البرمجة الإجرائية

يتضمن نموذج البرمجة الإجرائية مجموعة من الخصائص أو الميزات الرئيسية وأبرزها:

1. النمطية
2. الدوال المعرفة مسبقًا
3. تصميم البرنامج من أعلى لأسفل
4. تمرير المعاملات parameters
5. المتغيرات العامة
6. المتغيرات المحلية

لنتعرف على المزيد من التفاصيل حول كل خاصية من هذه الخاصيات!

1. النمطية

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

2. الدوال المعرفة مسبقًا

تتضمن كافة لغات البرمجة الإجرائية دوال مضمنة أو معرفة مسبقًا predefined functions لا تضطر المبرمج إلى ترميز كل شيء من البداية حيث تؤدي هذه الدوال المدمجة في اللغة وظائف محددة مثل العمليات الحسابية أو عمليات إدخال أو إخراج البيانات وتُضمَّن في مكتبات قياسية جاهزة يمكن للمبرمج استدعاؤها مباشرة والاستفادة منها.

3. هيكلة البرنامج من أعلى لأسفل

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

4. تمرير المعاملات

تعتمد البرمجة الإجرائية على ميزة تمرير المعاملات parameter passing إلى الإجراءات أو الدوال والتي تمثل دخل الإجرائية وهي البيانات اللازمة لتنفيذ عمليات الإجرائية ثم إرجاع خرج، أي لكل إجرائية عادةً دخل تعطي بمقابله خرج ما.

5. المتغير المحلي Local Variable

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

6. المتغير العام Global Variable

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

استخدامات اللغات الإجرائية

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

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

مميزات وسلبيات البرمجة الإجرائية

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

مميزات البرمجة الإجرائية

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

سلبيات لغة البرمجة الإجرائية

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

ما الفرق بين لغة البرمجة الإجرائية ولغة البرمجة كائنية التوجه؟

يقسم البرنامج في البرمجة الإجرائية إلى مجموعة من المتغيرات وهياكل البيانات والإجراءات وتكون هذه الإجراءات هي العناصر الأساسية للبرنامج فهي التي تتعامل مع المتغيرات وهياكل البيانات، بينما في البرمجة بالكائنات أو البرمجة كائنية التوجه OOP فيقسم البرنامج إلى مجموعة من الكائنات تمثل عناصره الرئيسية ويكون لكل كائن منها بياناته الخاصة والإجراءات التي تعالج هذه البيانات.

ففي البرمجة الإجرائية تكون الإجراءات أو الدوال مكونات مستقلة قائمة بذاتها في البرنامج، بينما في البرمجة كائنية التوجه تكون الإجراءات جزءًا من بينة الكائنات نفسها وكما ذكرنا سابقًا لا تكون البرمجة الإجرائية هي أفضل لغة للمشاريع الحساسة للبيانات لذا توفر البرمجة بالكائنات نموذجًا أفضل لحماية البيانات ومنع التعديل عليها خارج الكائن.

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

وفيما يلي جدول مختصر للمقارنة بين البرمجة الإجرائية ولغة البرمجة كائنية التوجه:

وللمزيد من المعلومات حول البرمجة كائنية التوجه وأهم مفاهيمها واستخداماتها أنصحك بمطالعة مقال البرمجة كائنية التوجه.

الخلاصة

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

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

اقرأ أيضًا

• دليلك الشامل إلى لغات البرمجة
• تعلم أساسيات البرمجة
• قواعد البرمجة ببساطة للمبتدئين

نسلط الضوء في مقال اليوم على فوائد تعلم البرمجة التي تشكل حجر الأساس لكافة التطبيقات والبرمجيات التي نستخدمها يوميًا سواء على أجهزة الحواسيب أو الجوالات أو غيرها من الأجهزة الذكية القابلة للبرمجة، فبدون البرمجة لن تكون كل هذه الأجهزة قادرة على تلبية متطلباتنا.

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

ما هي البرمجة؟

قبل أن نشرح أهمية تعلم البرمجة دعنا نوضح بداية ما هي البرمجة بالتحديد وما هي استخدامات البرمجة ولماذا ينبغي عليك تعلمها؟

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

تتعدد أنواع لغات البرمجة مثل بايثون وجافا سكريبت وجافا و C#‎ وروبي …إلخ. لكن يمكن القول بأن كل هذه اللغات تتشارك نفس المفاهيم فالبرامج الحاسوبية ما هي إلا شيفرات برمجية مكونة من سلسلة مرتبة من الأوامر والتعليمات اللازمة لتأدية مهمة أو حل مشكلة ما، ثم يقرأ الحاسوب هذه التعليمات وينفذها واحدة تلو الأخرى ليعطينا النتائج المطلوبة.

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

بناء على ذلك، يعتبر تعلم الخوارزميات أحد الخطوات الأساسية في تعلم البرمجة فإذا لم يكن لديك خوارزمية صحيحة تحقق الهدف المطلوب فلن يكون لديك برنامج صحيح، وتُعرَّف الخوارزمية بأنها تسلسل منطقي يوضح كافة الخطوات اللازمة لحل مشكلة أو مسألة ما وهو مفهوم لا يقتصر استخدامه على البرمجة أو تطوير البرامج بل يمكنك تطبيقه لحل أي مشكلة حياتية تواجهك، ويمكنك مطالعة المزيد حول الخوارزميات وطرق كتابتها في مقال المرجع الشامل إلى تعلم الخوارزميات للمبتدئين.

مستقبل البرمجة

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

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

لذلك السبب، نجد أن معظم البلدان اليوم ومن بينها دول عربية قد أدركت فوائد تعلم لغات البرمجة و أدرجتها في المناهج الدراسية بدءًا من المراحل الابتدائية المبكرة لتهيئة الجيل الجديد للمستقبل وتوسيع أفق تفكيرهم ومساعدتهم على مواكبة التطور التقني بسهولة فمن يتعلم البرمجة في سن مبكرة سيفهم التقنية ويتعامل معها بشكل أفضل من أولئك الذين لا يتعلمونها.

فوائد تعلم لغات البرمجة

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

من أهم فوائد تعلم البرمجة:

• ضمان الحصول على عمل
• الحصول على رواتب مجزية
• إمكانية العمل عن بعد
• محو الأمية الرقمية
• مواكبة التطور التقني
• تحسين التفكير والقدرة على حل المشكلات
• أتمتة الأعمال اليومية وزيادة الإنتاجية
• تحسين مهارات التواصل
• اكتساب الصبر والتركيز

لنناقش بمزيد من التفصيل كل فائدة من الفوائد الواردة أعلاه!

ضمان الحصول على عمل

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

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

الحصول على رواتب مجزية

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

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

إمكانية العمل عن بعد

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

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

محو الأمية الرقمية

يمكن القول أن عدم القدرة على كتابة وفهم التعليمات البرمجية في عصرنا الحالي يكافئ عدم القدرة على القراءة والكتابة من سنوات قليلة مضت، فمعظم الوظائف اليوم تتطلب معرفة أساسية بالتعامل مع الحاسوب واستخدام التطبيقات والبرامج المختلفة.

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

مواكبة التطور التقني

من منا اليوم لا يستخدم التقنيات والتطبيقات والأجهزة الذكية! بدءًا من التسوق عبر الإنترنت ودفع الفواتير ووصولًا للسيارات المبرمجة ذاتية القيادة والروبوتات الذكية التي أصبحت تنوب عنا في أداء الأعمال اليومية.

فقد أصبح كل شيء حولنا اليوم مزودًا بالتقنيات الحديثة وتعلم البرمجة يكسبنا القدرة على فهم طريقة عمل هذه التقنيات والتآلف معها بسرعة أكبر.

تحسين التفكير والقدرة على حل المشكلات

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

فالبرمجة مهارة تفيد الجميع وليست حكرًا على المبرمجين، وهنا تحضرني مقولة شهيرة لمؤسس شركة آبل ستيف جوبز:

اقتباس

"أعتقد أن كل شخص في هذه البلاد يجب أن يتعلم البرمجة لأنها تعلمه كيف يفكر"

أتمتة الأعمال وزيادة الإنتاجية

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

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

تحسين مهارات التواصل

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

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

تعلم الصبر والتركيز

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

ستجد بعد مدة من ممارسة البرمجة أنك تميل للصبر والهدوء عندما تواجه أي عقبات أو صعوبات في عملك أو حياتك اليومية وهذه مهارة مهمة نحتاجها جميعًا.

نصائح لتعلم البرمجة بكفاءة

بعد أن تعرفت على فوائد تعلم البرمجة لا بد أنك متحمس الآن لبدء رحلة تعلم البرمجة واحترافها لذا سأختم المقال بجملة من النصائح السريعة التي تساعدك على تعلم البرمجة بسرعة وتجنبك الفشل.

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

إليك جملة نصائح لتعلم البرمجة بكفاءة:

• ابدأ بتعلم لغة برمجة سهلة وتناسب المبتدئين مثل بايثون Python أو جافا سكريبت JavaScript أو روبي Ruby كما يمكنك البدء بإحدى لغات البرمجة المرئية المعتمدة على الكتل مثل لغة سكراتش التي تعلمك البرمجة بطريقة ممتعة ومسلية.

• تعلم أساسيات البرمجة مثل الشروط والحلقات والمتغيرات والدوال وهياكل البيانات data structures وتأكد من إتقانها قبل الانتقال لمواضيع أكثر تقدمًا.

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

• احرص على التطبيق العملي وممارسة كل ما تتعلمه فالاكتفاء بالمعلومات النظرية ومشاهدة الدروس ومقاطع الفيديو لن يساعدك على تعلم البرمجة بطريقة احترافية.

• لا تتوقف عن التعلم وتطوير مهاراتك والاطلاع على أحدث الأدوات والتقنيات واستخدامها في مشاريعك البرمجية.

الخلاصة

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

ابدأ من الآن خطوتك الأولى لتعلم البرمجة فقد تكون أنت من سيطور برامج رائعة تخدم البشرية!

اقرأ أيضًا

• مدخل إلى الخوارزميات
• أسهل لغات البرمجة
• أهمية البرمجة وأهم لغات البرمجة
• المرجع الشامل إلى تعلم لغة بايثون

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

تعريف صفحة الويب Web Page

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

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

يمكن لصفحات الويب أن تكتب بأنواع مختلفة من لغات البرمجة مثل HTML و CSS وجافا سكريبت و PHP وغيرها من اللغات والتقنيات وفق ما تقتضي الحاجة، لكن تعد لغة HTML التقنية الأساسية لبناء صفحة الويب، فصفحات الويب بتنسيق HTML هي المعيار للمحتوى الذي يعرضه متصفح الإنترنت.

وتجدر الإشارة إلى أن HTML ليست لغة برمجة بالمعنى المتعارف، بل لغة توصيفية markup language تعتمد على رموز خاصة تسمى الوسوم Tags، هذه الوسوم مسؤولة عن وصف بنية صفحات الويب وطريقة عرض محتوياتها وإظهارها بالبنية التي نريدها، كعرضها بشكل فقرات أو جداول أو تعدادات نقطية …إلخ.

تتميز لغة التوصيف HTML بكونها مفهومة ومعبرة فكل ما تقوم به هو وصف أسلوب عرض المحتوى للمتصفح وطريقة تخطيط صفحة الويب، على سبيل المثال لإدراج عنوان رئيسي وفقرة في صفحة الويب نكتب اكتب العنوان بين علامتي <h1> و <h1/> ولكتابة فقرة نصية اكتبها بين علامتي <p> و <p/> بالشكل التالي:

<h1> هذا هو عنوان الفقرة</h1>
<p> هذا هو محتوى الفقرة</p>

قم بكتابة الكود السابق في أي محرر نصوص مثل المفكرة واحفظه بالامتداد ‎.html أو ‍‎.htm وسمه بأي اسم تختاره ليكن example.html، ستلاحظ أن أيقونة الملف قد تحولت إلى صفحة ويب وعند فتحها تعرض في المتصفح الافتراضي لديك وتظهر بشكل مشابه للصورة التالية:

لاحظ أن النص (هذا هو عنوان الفقرة) ظهر كعنوان غامق لأننا غلفناه بعلامات خاصة بالعنوان، بينما ظهر النص (هذا هو محتوى الفقرة) كنص عادي لأننا وضعناه بين علامتين تدلان على كونه فقرة نصية.

تحتاج هذه الصفحة للكثير بالطبع من أكواد HTML الإضافية كي تبدو صفحة ويب متكاملة الأركان، كما تحتاج لإضافة تنسيقات مختلفة من خطوط وألوان وتخطيطات لجعل مظهرها أكثر احترافية وهو ما تقوم به لغة CSS التي تتكامل مع لغة HTML حيث تضاف شيفرات CSS بعدة طرق إلى صفحة الويب، فهي إما أن تكتب في ملف ‎.html نفسه، أو تضاف في ملف نصي مستقل بالامتداد css. بأي اسم تختاره وليكن styles.css ثم تربط مع ملف ‎.html من خلال كتابة الكود التالي:

<link rel="stylesheet" type="text/css" href="styles.css" />
<h1> هذا هو عنوان الفقرة</h1>
<p> هذا هو محتوى الفقرة</p>

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

h1 {
  color: red;
}
p {
  color: blue;
}

بعدها عند عرض الصفحة ستظهر لنا بالشكل المنسق التالي:

للمزيد حول تصميم صفحات الويب وكتابة أكواد CSS يمكنك مطالعة مقال HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك ومقال  أساسيات CSS، كما يمكنك تعلم المزيد حول ربط أكواد مع ملف ‎.html من خلال مقالة كيفية بناء موقع باستخدام CSS.

ما هو متصفح الويب؟

ذكرنا في الفقرات السابقة كلمة متصفح عدة مرات وذكرنا أنه برنامج يستخدم لفتح صفحات الويب وعرضها، ولعلك تتساءل ما هو دور المتصفح في صفحات الويب التي هي بالأساس مستندات نصية تكتب ضمن محررات نصوص أو محررات أكواد برمجية؟ وإليك الجواب:

كي تتمكن من فتح صفحات الويب على جهازك تحتاج لوجود برنامج متصفح الويب وهو عبارة عن تطبيق يمكنك من الوصول إلى المعلومات المضمنة في صفحات الويب وعرضها بالشكل الصحيح، فهو بمثابة حاوية تعرض كافة محتويات الصفحة.

هناك الكثير من متصفحات الويب وأشهر خمس متصفحات هي:

1. جوجل كروم Chrome
2. فايرفوكس Firefox
3. مايكروسوفت إيدج Microsoft Edge
4. أوبرا Opera
5. سفاري Safari

كي تتمكن متصفحات الويب من عرض صفحات الويب فهي تستخدم محرك عرض Rendering Engine أو ما يسمى بمحرك التخطيط Layout Engine مهمته أخذ كافة معلومات المحتوى والتصميم الواردة في التعليمات البرمجية التي كتبت بها هذه الصفحة وتفسيرها وعرضها بالشكل النهائي لك.

يستخدم كل متصفح محرك عرض مختلف عن الآخر، على سبيل المثال يستخدم فايرفوكس محركًا يسمى Gecko ويستخدم كل من كروم وأوبرا محرك باسم Blink كما أن بعض المتصفحات قد تستخدم تقنيات خاصة بها غير متوفرة في متصفحات أخرى، ما يهمك في هذا الأمر أن تفهم سبب وجود الاختلافات عند طريقة عرض صفحات الويب من متصفح لآخر، أو سبب عدم عمل بعض الميزات في متصفح بينما تعمل بشكل مثالي في متصفح آخر، ولهذا السبب يحرص مصممو المواقع على معالجة المشاكل الشائعة للتوافق مع المتصفحات في HTML و CSS.

كيف أفتح صفحات الويب؟

يملك كل موقع ويب اسم نطاق Domain name مميز خاص به لا يستخدمه أي موقع آخر ويجب حجزه من خلال دفع رسوم شهرية أو سنوية لشركات تسجيل أسماء المجالات على سبيل المثال اسم المجال الرئيسي لشركة حسوب هو hsoub.com وهذا المجال هو جزء من عنوان الموقع الكامل URL وهو https://www.hsoub.com/‎.

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

على سبيل المثال للوصول للصفحة الرئيسية لأكاديمية حسوب كل ما عليك هو إدخال العنوان https://academy.hsoub.com/‎‏‏‏ في شريط عنوان المتصفح، وللوصول إلى الصفحة الخاصة بدروس البرمجة في الأكاديمية يمكنك كتابة العنوان https://academy.hsoub.com/programming/‎ أما إذا كنت لا تعرف العنوان الخاص بصفحة أو موقع ما يمكنك البحث عن اسمه بأحد محركات البحث والوصول له من خلال نتائج البحث وهذه الطريقة هي الأمر الشائع لدى المستخدمين بدلًا من حفظ العناوين الخاصة بكل صفحة.

محرك البحث Search Engine هو نوع خاص من مواقع الويب يتم الوصول لها من خلال متصفح الويب ليساعدك في العثور على مواقع وصفحات الويب وأشهرها على الإطلاق محرك بحث جوجل الذي يتميز بدقة نتائجه، ومؤخرًا برز اسم محرك بحث Bing من شركة مايكروسوفت الذي يعمل بتقنيات الذكاء الاصطناعي.

ما الفرق بين موقع الويب وصفحة الويب؟

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

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

ما هي عناصر صفحة الويب؟

تختلف العناصر أو الأقسام التي تحتويها صفحات الويب وطريقة توزيع المحتوى ضمن هذه الأقسام بحسب الهدف من هذه الصفحة وطبيعة المحتوى الذي تتضمنه لكن يمكن القول أن معظم صفحات الويب تتضمن العناصر التالية:

• ترويسة الصفحة: وهي تتضمن عادة اسم الموقع أو شعار الموقع وشريط التنقل بين صفحات الموقع وصندوق للبحث في محتوى الموقع، وقد تتضمن بعض الإشعارات أو العروض المميزة أو الصور المميزة التي تريد لفت نظر المستخدمين لها.

• الشريط الجانبي للصفحة: وهو قسم اختياري في الصفحة يعرض المعلومات التي لا تكون جزءًا من المحتوى الرئيسي للصفحة. وقد يتضمن إعلانات أو عبارات دعوة لاتخاذ إجراء CTA أو روابط لأجزاء أخرى من موقع الويب وقد يتضمن رابط الرجوع إلى أعلى الصفحة لا سيما في الصفحات ذات المحتوى المكثف.

• المحتوى الأساسي للصفحة: وهو يتضمن عادة عنوان صفحة الويب ومحتوى منوع من فقرات وصور وروابط لصفحات أخرى حسب الحاجة.

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

أنواع صفحات الويب

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

صفحات الويب الثابتة Static Web Pages

هي صفحات تمتلك محتوى ثابت مخصص للقراءة فقط ويظهر لكافة المستخدمين بنفس الشكل، وهذه الصفحات تكتب عادة بلغة HTML حيث يتوجب عليك إنشاء ملف بالامتداد ‎.html لكل صفحة جديدة تضيفها للموقع.

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

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

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

لكن ماذا لو كانت المواقع ذات محتوى متغير بشكل متكرر أو يحتاج لأن يخصص حسب المستخدم أو يتفاعل معه؟ عندها تحتاج لأن تصمم صفحات ويب ديناميكية.

صفحات الويب الديناميكية Dynamic Web Page

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

تصمم صفحات الويب الديناميكية باستخدام لغات برمجة تعمل على الخادم مثل PHP أو بايثون أو روبي ..إلخ، إضافة للغات HTML و CSS وجافا سكريبت وغالبًا ما تحتوي على عناصر ديناميكية تتفاعل مع مدخلات المستخدم وتستخرج المعلومات المطلوبة المخزنة في الخادم لإنشاء صفحة الويب النهائية التي يشاهدها المستخدم في متصفحه. ولمطالعة مزيد من المعلومات حول الطريقة التي تعمل بها صفحات الويب الدينامكية أنصح بمطالعة مقال نظرة على تفاعلات الخادم مع العميل في موقع ويب ديناميكي.

تعلم برمجة وتصميم صفحات الويب

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

إليك أهم الخطوات التي يمكنك اتباعها لتعلم برمجة صفحات الويب:

• تعلم كيف يعمل الويب
• تعلم الأدوات والتقنيات اللازمة لتطوير صفحات الويب
• تعلم تصميم المواقع الإلكترونية
• اختر مصادر تعلم موثوقة ومنظمة
• لا تتوقف عن التعلم

لنتعرف كل خطوة من هذه الخطوات بمزيد من التفصيل:

1. تعلم كيف يعمل الويب

في هذه المرحلة عليك تعلم مجموعة من المفاهيم الأساسية مثل:

• كيف يعمل الويب Web.
• كيف تعمل مواقع الويب.
• ما هي مكونات الويب الرئيسية.
• ما هو مفهوم بروتوكولات الويب مثل HTTP و TCP/IP و وكيفية تخزين وتنظيم الصفحات والملفات المختلفة لمواقع الويب على الخادم المتصل بالإنترنت وعرضها على المتصفح أو العميل.
• أنواع الخوادم وكيفية إدارتها ومفهوم استضافات الويب وأنواعها.

2. تعلم الأدوات والتقنيات اللازمة لتطوير صفحات الويب

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

3. تعلم تصميم المواقع الإلكترونية

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

4. اعتمد مصادر تعلم موثوقة

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

ستجد في أكاديمية حسوب الكثير من الدورات التدريبية المتخصصة في تطوير مواقع الويب مثل:

• دورة تطوير واجهات المستخدم التي تعرفك على كل ما يخص تطوير الواجهات الأمامية لمواقع الويب وبناء عدة مواقع ويب ثابتة تعزز معرض أعمالك وتساعدك في العثور على وظيفة ملائمة.
• دورة تطوير التطبيقات باستخدام لغة Python التي ستتعلم فيها أساسيات لغة البرمجة بايثون وتبني من خلالها مواقع مختلفة مطلوبة في سوق العمل.
• دورة تطوير التطبيقات باستخدام لغة JavaScript التي ستتقن من خلالها لغة البرمجة الأكثر شهرة وانتشارًا جافا سكريبت وتتعلم تطوير العديد من أنواع التطبيقات المختلفة من خلالها.
• دورة تطوير تطبيقات الويب باستخدام لغة PHP التي ستتعلم من خلالها تطوير مواقع انترنت احترافية باستخدام العديد من الأدوات والتقنيات.

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

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

5. لا تتوقف عن التعلم

الاستمرارية في التعلم أساسية في أي مجال تقني وفي مجال تطوير الويب على وجه الخصوص لكونه مجالًا متجددًا بصورة مستمرة ويوفر الكثير من التقنيات والأدوات التي تسهل عمل المطورين وتحسن من طريقة برمجة صفحات الويب، لذا كن على اطلاع على كل جديد في هذا المجال واستفد من في الارتقاء بمستوى عملك.

الخلاصة

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

اقرأ أيضًا

• تعلم تطوير الويب كيف يعمل الويب Web؟
• عالم الويب ومعاييره
• كيفية التعامل مع الويب
• مراحل بناء مواقع الإنترنت من الصفر

كثيرًا ما تتردد على مسامعنا عبارة التفكير المنطقي ونسمع نصائح حول أهميته وضرورة تحسينه واستخدامه في حل مشكلات حياتنا اليومية واتخاذ القرارات الصعبة، ولعلك تتساءل ما هو التفكير المنطقي؟ وما أهميته للمبرمج وهل فعلاً كلما كان لديك منطق أفضل ستتمكن من احتراف البرمجة بشكل أسرع؟ وهل التفكير المنطقي هو مَلَكة فطرية تولد مع الشخص أم أنه مهارة مكتسبة وقابلة للتعلم والتحسين؟ إذا كنت مهتمًا بمعرفة الإجابة على كل هذه التساؤلات تابع قراءة المقال إلى النهاية.

سنتعرف في مقال اليوم على ماهية التفكير المنطقي وأهميته في مجال البرمجة وأهم الطرق والأدوات التي تساعدك على اكتساب مهارات التفكير المنطقي وتحسين طريقة تفكيرك وحل الخوارزميات المعقدة.

ما هو التفكير المنطقي؟

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

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

خصائص التفكير المنطقي

قد تتساءل ما هي الخصائص التي يجب أن أتمتع بها كي أعتبر نفسي منطقيًا وهل لدي القدرة على التفكير بشكل منطقي من أجل حل أي مشكلة أو اتخاذ أي قرار؟ لأساعدك على الإجابة دعني أعدد لك خصائص التفكير المنطقي:

1. العقلانية وعدم التحيز العاطفي والتأثر بالمشاعر عند اتخاذ قرار ما في أي موقف. على سبيل المثال يفكر الشخص العقلاني قبل شراء منتج ما بكل إيجابياته وسلبياته وهل سيلبي هذا المنتج متطلباته أم لا ثم يتخذ قرار الشراء من عدمه.
2. التنظيم والتخطيط المسبق لكل شيء على سبيل المثال إذا كنت تنوي الذهاب في رحلة هل تفكر مليًا قبل ذلك في كل شيء يتعلق بتفاصيل رحلتك مثل زمان ومكان الرحلة وكيف ستقضي وقتك ومتى ستعود؟ إذا كان الجواب نعم فأنت في الغالب شخص منطقي.
3. الانتباه ودقة الملاحظة لكل ما يحيط بك وأخذه بالاعتبار عند التفكير في حل مشكلة ما فمعظم الأخطاء تنجم عن عدم الوعي والانتباه للتفاصيل الدقيقة.
4. الديناميكية وإيجاد حلول بديلة عند الضرورة.
5. الفضول وحب الاستكشاف وتعلم أشياء جديدة وطرح العديد من الأسئلة لتوسيع أفق التفكير.
6. الاعتراف بالخطأ وتصحيحه فهذا ينم عن نضج فكري لدى الشخص.
7. الاعتماد على الحقائق والمعرفة وليس على الحدس والمعتقدات عند اتخاذ القرارات.

بعد قراءة الخصائص الواردة أعلاه، هل تعتقد أنك تملك مهارة التفكير المنطقي أم لا؟

مراحل التفكير المنطقي

كي تتمكن من التفكير منطقيًا وحل أي مشكلة تواجهك بطريقة منهجية يمكنك اتباع الخطوات التالية:

1. فهم المشكلة جيدًا فإذا لم نفهم المشكلة تمامًا فلن تتوصل لأفضل حل ممكن لها أو ربما تستغرق الكثير من الوقت لتحلها.
2. تقسيم المشكلة المعقدة وصعبة الحل إلى أجزاء صغيرة وبسيطة يسهل حلها.
3. وضع خطة واضحة لحل كل جزء من المشكلة.
4. البدء بتنفيذ الخطة التي وضعتها في الخطوة السابقة.
5. العودة للخطوة الأولى.

أهمية التفكير المنطقي للمبرمج

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

لذا في حال رغبت بأن تصبح مبرمجًا ستكون أول نصيحة توجه لك هو تعلم مهارات التفكير المنطقي والخوارزميات لكونها خطوة أساسية تسبق مرحلة البرمجة وكتابة الأكواد، وبدون امتلاك مهارات التفكير المنطقي ستجد صعوبة كبيرة في حل المشكلات البرمجية المعقدة.

وإليك جملة من فوائد التفكير المنطقي للمبرمج:

1. يمنح القدرة على التفكير خارج الصندوق وابتكار حلول إبداعية للمشكلات البرمجية.
2. ينشط الدماغ ويحفز الذاكرة ويساعد على ربط المعلومات ببعضها البعض.
3. يساعد على تقسيم المشكلات إلى خطوات بسيطة ومتسلسلة منطقيًا.
4. يعزز القدرة على تصور حل المشكلات البرمجية وصياغة طريقة الحل الأمثل قبل البدء في كتابة الكود البرمجي.
5. يساعد على كتابة وفهم الخوارزميات وهي مجموعة من التعليمات التي تخبر الحاسوب بما يتوجب عليه القيام به لحل المشكلة بناء على معطيات دخل محددة.
6. يسهل فهم منطق البرمجة وأكوادها واستخدام التعبيرات المنطقية والعبارات الشرطية.

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

التفكير المنطقي لحل المشكلات البرمجية

يحتاج أي مبرمج لمهارة التفكير المنطقي لحل المشكلات البرمجية لأن حلها يتطلب طريقة معينة في التفكير ووضع خطوات الحل بطريقة مفضلة ومتسلسلة منطقيًا وقابلة للحل حاسوبيًا.

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

قد تخبرني أن الأمر بديهي ولا يحتاج لأي تفكير منطقي ضع الزبدة والمربى على الخبز وتناولها لكن انتبه هنا لأن هذا لن يساعدك في حل المشكلة وبناءً على ذلك قد تكون الخطوات المنطقية للعمل كالتالي:

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

قد يكون هناك أكثر من طريقة لحل المشكلة على سبيل المثال يمكن أن نختصر بعض الخطوات ونفكر في حل المشكلة كالتالي:

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

قد تفكر أيضًا أن الخطوات (افتح العلبة، اغمس السكين، وزع) تتكرر مرة من أجل الزبدة ومرة من أجل المربى فلم لا نحاول دمجها بوظيفة وليكن اسمها مثلًا وضع المادة المطلوبة. تسألك عن المادة التي تريدها وتطبق هذه الخطوات الثلاث دفعة واحدة في كل مرة تريد فيها تنفيذ هذه الخطوة.

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

في ختام هذه الفقرة أدعوك لمشاهدة هذا الفيديو اللطيف والشيق لأب يعلم أطفاله كيف يكتبون بدقة التعليمات اللازمة لطريقة صنع شطيرة زبدة الفول السوداني مع المربى، عندما تتعامل مع الحاسوب تعامل معه كأنه ذلك الأب وأخبره بالتعليمات المطلوبة لحل مشكلتك بدقة متناهية.

اكتساب التفكير المنطقي في البرمجة

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

لحسن الحظ رغم أن التفكير المنطقي هو ملَكَة فطرية يتميز بها البعض ويساعدهم وجودها على تعلم لغات البرمجة أسرع من غيرهم لكنه في نفس الوقت مهارة قابلة للاكتساب والتحسين والتطوير من خلال العديد من الطرق والتقنيات.

إليك أهم الطرق والأدوات التي تساعدك على تحسين التفكير المنطقي في البرمجة:

• حلّ الألغاز والألعاب المنطقية.
• استخدم الورقة والقلم لوصف أي مشكلة تواجهك.
• تعلّم الخوارزميات.
• قسّم المشكلات المعقدة لأجزاء أصغر.
• تمكّن من أساسيات البرمجة.
• شارك في المسابقات والتحديات البرمجية.
• ادرس الشيفرات البرمجية للآخرين.
• تعلّم نماذج البرمجة وأنماط التصميم.

دعنا نناقش كل طريقة من هذه الطرق ونتعرف على أهميتها في تنمية منطقك البرمجي

حلّ الألغاز والألعاب المنطقية

فحل الألغاز المنطقية وألعاب الذكاء مثل الشطرنج وألغاز الكلمات المتقاطعة وسودودكو و tic-tac-toe أو غيرها من الألغاز الرياضية والألعاب المنطقية وألغاز الذكاء IQ أمر ممتع ومفيد جدًا في تشيط عقلك وتحسين تفكيرك المنطقي وبالتالي تحسين قدراتك البرمجية.

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

1. لديك عملة واحدة على الأقل.
2. لديك خمس عملات على الأقل.
3. عدد العملات الموجود معك أقل من خمسة.

خذ وقتك في التفكير بحل هذه المسألة ويمكن أن تشاركني في التعليقات الجواب الذي توصلت إليه وكيف توصلت إليه.

كما يمكن أن تتدرب على الكثير من المسائل والأحاجي المنطقية، ابحث عن ألغاز مثل لغز المئة سجين 100‎ prisoners problem أو لغز الجمل والموز camel and banana puzzle أو غيرها من الألغاز المشهورة التي تخص مجال البرمجة وعلوم الحاسب فهي متوفرة بكثرة على مواقع الإنترنت ومتاجر التطبيقات.

استخدم الورقة والقلم لوصف أي مشكلة تواجهك

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

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

تعلّم الخوارزميات

فتعلم الخوارزميات وهياكل البيانات من شأنه أن يعزز التفكير المنطقي التحليلي والتفكير الخوارزمي الذي يغير طريقة تفكيرك في حل المشكلات ويعلمك منهجية التفكير بطريقة تشبه الطريقة التي يعمل بها الحاسوب كما أنه يساعدك لاحقًا في تعلم لغات البرمجة.

يمكن أن تبدأ بالخوارزميات الأساسية مثل خوارزميات الفرز والترتيب sorting algorithms وخوازميات البحث search algorithms وخوارزميات فرق تسد divide and conquer وتفهم آلية عملها ثم تتدرج في تعلم خوارزميات أكثر تعقيدًا، كما أن فهم هياكل البيانات مثل القائمة المترابطة linked lists والمكدس stack والشجرة الثنائية binary trees واستخدامها أثناء تنفيذ الخوارزميات يسرع كثيرًا من قدرتك على حل المشكلات المعقدة.

قسّم المشكلات المعقدة لأجزاء أصغر

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

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

• معرفة من أين أبدأ البحث (من بداية السلسلة أم نهايتها أم من الوسط).
• معرفة متى وكيف يتم إيقاف عملية البحث.
• تحديد كيفية مقارنة عنصرين من عناصر السلسلة لتحديد أيهما يأتي قبل العنصر الآخر.
• تحديد كيفية متابعة البحث عند عدم العثور على الرقم المطلوب.

تمكّن من أساسيات البرمجة

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

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

شارك في المسابقات والتحديات البرمجية

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

ادرس الشيفرات البرمجية للآخرين

فكما ذكرنا سابقًا قد توجد أكثر من طريقة لحل مشكلة معينة لهذا قد يتبع كل مبرمج طريقة خاصة به لحل المشكلة والتعرف على وجهات نظر مختلفة يفيدك بكل تأكيد ويطور منطقك البرمجي، ستجد الكثير من الأكواد لمبرمجين خبراء في المجتمعات البرمجية ومستودعات المشاريع مفتوحة المصدر مثل GitHub.

تعلم نماذج البرمجة وأنماط التصميم

إن تعلم نماذج البرمجة مثل البرمجة كائنية التوجه OOP والبرمجة الوظيفية functional programming وأنماط التصميم البرمجي design patterns التي توفر حلول ونماذج للمشكلات البرمجية الشائعة فهي تساعدك في بناء حلول منطقية أكثر وضوحًا وتنظيمًا وأقل أخطاءً وتحسن مهاراتك البرمجية.

عادة ما تدرس مادة الخوارزميات وحل المشكلات بما يتعلق بالتفكير المنطقي في بداية أي مسار يُعلم البرمجة تعليمًا صحيحًا، سواءً في الجامعات أو مسارات البرمجة الخاصة، فمثلًا في دورة علوم الحاسوب في أكاديمية حسوب ستتعرف على أهم الخوارزميات وطريقة كتابتها وتحليلها، وتتعرف على أهم بنى المعطيات وتتعلم أساسيات البرمجة وأنماط التصميم وتكتب الكثير من البرامج العملية التي تعزز تفكيرك المنطقي وتحسّن مستواك البرمجي بشكل كبير.

نصائح إضافية لتحسين التفكير المنطقي

إضافةً للطرق التي ذكرناها سابقًا، إليك قائمة من النصائح السريعة التي من شأنها كذلك أن تحسن مهاراتك وتفكيرك المنطقي وتعزز فهمك للبرمجة:

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

الخلاصة

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

وتذكر في الختام أن تركيزك على تعلم لغات البرمجة والأمور التقنية على أهميته لا يكفي لجعلك مبرمجًا جيدًا، لذا لا تهمل مهاراتك الناعمة ومن أهمها مهارات التفكير المنطقي والتواصل الفعال فهي سبيلك للتميز والحصول على فرصة العمل التي تطمح لها.

اقرأ أيضًا

• مدخل إلى الخوارزميات
• المرجع الشامل إلى تعلم الخوارزميات
• كيف تتعلم البرمجة: نصائح وأدوات لرحلتك في عالم البرمجة
• برمجة الحاسوب للمبتدئين
• هل أنا حقا مبرمج؟ متى أسمي نفسي مبرمجًا
• لماذا يجب أن تعلم طفلك البرمجة؟

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

إذا أردت التعرف أكثر على كيفية بناء مواقع إنترنت من الصفر بواجهتيها، فننصحك بالانضمام إلى دورة تطوير واجهات المستخدم ودورة تطوير تطبيقات الويب باستخدام لغة PHP، ولا تنسَ الاستعانة خلال رحلة تعلمك وعملك بتوثيقات موسوعة حسوب المجانية. وإذا أردت متابعة المعلومات البرمجية العلمية مكتوبة فيمكنك الاطلاع على قسم البرمجة في أكاديمية حسوب، كما يمكنك متابعة جديد الفيديوهات التقنية المتاحة على يوتيوب أكاديمية حسوب مجانًا.

كثيرًا ما تصادف أغلبنا مشاكل معينة في موقع الويب، وعندما نسأل عن حل لها تكون الإجابة هي "أفرغ الكاش!"، لكن السؤال الفعلي هنا ما هو الكاش؟ وكيف يستخدم في مواقع الويب هذا ما سوف نقوم بالإجابة عنه في هذا الدرس.

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

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

يجيب الفيديو الآتي عن كل التساؤلات السابقة، ويوضح لك متى يكون بمقدورك نعت نفسك بالمبرمج:

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

اقتباس

"هؤلاء الذين يبنون البرمجيات هم في الواقع من يغيّرون العالم بطريقة أو بأخرى". لويس سيرن، مدير تنفيذي لشركة نيو ريلك.

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

تحدثنا في مقال "مدخل إلى تطوير البرمجيات" عن المجال وعملية تطوير البرمجيات عمومًا، وأما الهدف من هذا المقال هو الوقوف على دورة الحياة التي يجب أن تسلكها عملية تطوير البرمجيات حتى يكون المنتج النهائي فعالًا ومحققًا للغاية التي صُمم لأجلها بأدنى هامش للخطأ انطلاقًا من الفكرة وحتى التنفيذ والصيانة. كما سيبحث في أهم الاستراتيجيات المتبعة في إدارة دورة حياة تطوير البرمجيات Software Development Life Cycle واختصارًا SDLC. كما يساعدك هذا المقال في تنمية معارفك ومهاراتك في تحليل الأنظمة إن كنت تفكر فيها كمهنة مستقبلية.

من أين تأتي الأفكار؟

اقتباس

"الحاجة أم الاختراع"

فما يخلق البرمجيات هو الحاجة لها، وتظهر الحاجة إلى بناء نظام معلوماتي جديد لإدارة نشاط معين عندما يبدأ هذا النشاط أو العمل بالمعاناة جراء أسباب متنوعة منها:

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

وقد تكون الحاجة إلى المنظومة الجديدة رؤية مستقبلية لواقع العمل والرغبة في تحسين واقعه:

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

لا يمكن لأي كان أن يتخذ قرار تطوير برمجيات المنظومة المعلوماتية القائمة as-is system أو استبدالها بمنظومة جديدة to-be system في الجهة التي تحتاج إلى ذلك، بل يأتي هذا القرار عادة عن أشخاص تقنيين أو غير تقنيين على تماس مباشر مع المنظومة ومع أصحاب القرار. يُدعى هؤلاء بالمعنيين أو أصحاب المصلحة stakeholders في بناء أو تطوير المنظومة وقد يكون هؤلاء:

• مالكو أنظمة
• مشرفون على تشغيل أنظمة
• مبرمجون
• مصممو ومحللو أنظمة
• مستشارون أو مزودون للخدمات المعلوماتية

يمتلك هؤلاء الخبرة والدراية التي تؤهلهم لمعرفة الإيجابيات والسلبيات في المنظومات القائمة واستشعار الفرص الجديدة التي قد يأتي بها التغيير.

دورة إدارة تطوير المنتجات

احترف إدارة تطوير المنتجات الرقمية بدءًا من التخطيط وتحليل السوق وحتى إطلاق منتج مميز وناجح

اشترك الآن

هل نبدأ بكتابة الشيفرة مباشرة؟!

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

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

لم تأتي هذه القاعدة من فراغ، بل من الإخفاقات التي عانتها الكثير من الشركات العالمية، وإليك بعض الأمثلة من الواقع:

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

دورة حياة البرمجيات

تمر البرمجيات والأنظمة المعلوماتية عمومًا أثناء تطويرها بأربعة مراحل رئيسة وفي كل مرحلة مجموعة من الخطوات. ينتج عن كل مرحلة مجموعة من المخرجات deliveries تُبنى عليها مراحل لاحقة. هذه المراحل الأربعة هي:

1. التخطيط planning
2. التحليل analysis
3. التصميم design
4. التنفيذ implementation

سنتحدث باختصار عن كل مرحلة وسنتكلم بإسهاب عن كل مرحلة في مقالات لاحقة.

مرحلة التخطيط لبناء منظومة برمجية

اقتباس

إن فشلت في التخطيط، فقد خططت لفشلك.

لا بد في هذه المرحلة من الإجابة على الأسئلة التالية:

• لم علينا بناء هذه المنظومة أو هذا البرنامج؟
• ما الذي ستقدمه هذه المنظومة إلى الفعالية التي طلبتها أو للجهة التي تنتجها؟
• هل يمكننا بناء هذه المنظومة؟
• كم يستغرق بناؤها؟

وكما أشرنا سابقًا أن لكل مرحلة مجموعة من الخطوات التي تمر بها حتى تكتمل، وعادة ما تضم مرحلة التخطيط خطوتين أساسيتين هما:

• تهيئة المشروع Project initiation: يٌقصد بتهيئة المشروع هو التخطيط المبدئي له، وتضم هذه الخطوة مجموعة خطوات فرعية هي:
• تحديد أهمية المشروع وضرورة بنائه بالنسبة للعميل أو صاحب المصلحة المعني مباشرة بتطويره.
• دراسة جدوى المشروع Project feasibility بالتشاور المباشر بين محلل الأنظمة والعميل وتكون الدراسة على ثلاثة أصعدة تقنية تحدد إمكانية بناء المنظومة، واقتصادية تحدد ما إن كان ضروريًا بناء المنظومة الجديدة أو تحسين القديمة، وتنظيمية تحدد ما إن كان سيلقى المنتج الجديد ترحيبًا من مستخدميه وهل يتماشى مع أسلوب العمل في الجهة التي طلبت بناءه.
• دراسة المخاطر، وتختلف طريقة دراسة المخاطر من شركة إلى أخرى إلا أنها تسعى عمومًا إلى تحديد مصدر الخطر واحتمالية وقوعه وأثره المتوقع على المنظومة وطريقة تفادي الخطر أو التخفيف من أثره.
• إدارة المشروع Project management: وهي عملية التحكم بتطوير المشروع خلال مدة محددة بأقل تكلفة للحصول على المنظومة المطلوبة صحيحة وفعالة. يراقب مديرو المشروع عادة العمل ككل ويتحكمون بكل المهمات ويحددون الأدوار الوظيفية وينسقون بينها وتضم هذه الخطوة الخطوات الفرعية التالية:
• تحديد عدد الموظفين سواء محللي نظم أو مصممين أو مبرمجين.
• البحث عن المهارات اللازمة لإنجاز كل مهمة من مهام المنظومة.
• تحفيز فريق العمل لتحقيق الأهداف.
• الحد بين النزاعات والخلافات وتقريب وجهات النظر في فريق العمل.
• اقتراح التقنيات اللازمة لإنجاز العمل.
• وضع خطة عمل تعتمد على الاستراتيجية المتبعة في إدارة دورة حياة المنظومة.

أما مخرجات هذه المرحلة فتأتي في مستندين الأول يضم خطة العمل والثاني مستند دراسة الجدوى والمخاطر ويعرض على الشخص المسؤول أو على لجنة القبول acceptance committee فإما أن يُقبل أو يُرفض أو يؤجل وفقًا للفائدة المضافة موازنة بالمخاطر.

مرحلة تحليل المنظومة

لا بد أن تتمكن هذه المرحلة من الإجابة عن الأسئلة التالية:

• ماذا نتوقع من المنظومة؟ ما هو المطلوب منها؟
• من سيستخدم المنظومة الجديدة أو المطوّرة؟
• أين ومتى ستُستخدم المنظومة الجديدة؟

تضم هذه المرحلة خطوتين رئيسيتين:

• تحديد متطلبات المنظومة
• بناء نماذج تحليلية للمنظومة

تحديد متطلبات المنظومة define requirements

وهي أكثر خطوات هذه المرحلة (إن لم يكن دورة التطوير بأكملها) أهمية وحساسية. إذ يمكن أن نناقش في هذه المرحلة ماهو المطلوب من المنظومة البرمجية وفقًا لرؤية المعنيين بتطويرها على مختلف المستويات والمرجعيات. فالنقاش في هذه المرحلة ووضع التصورات والنماذج سيكون متاحًا إلى أقصى الحدود دون أي آثار سلبية موازنة بالتغييرات التي يُضطر فريق العمل إلى إجرائها في مرحلة التنفيذ، إذ سيرفع ذلك من نسبة فشل المشروع إلى أكثر من 50%. وتتميز هذه المرحلة بأنها تدريجية أي يجري تطوير نماذج عن متطلبات المنظومة تدريجيًا وليس دفعة واحدة كما تتميز بأنها تكرارية أي يكون تحسين النماذج بالتكرار.

ما هو المتطلب؟ المتطلب هو تصريح عما يُراد من المنظومة فعله أو تصريح عن الخصائص التي تتمتع بها المنظومة التي نريد بناءها. هنالك نوعان من المتطلبات: متطلبات وظيفية functional ومتطلبات غير وظيفية nonfunctional.

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

وأما المتطلبات غير الوظيفية nonfunctional، فتضم تصريحات عن ميزات هذه المنظومة التي لا تتعلق بطريقة عملها. وكمثال عليها أن تعمل المنظومة مثلًا على الحواسب وأن تعمل أيضًا على الهواتف الذكية.

كما تجد أحيانًا متطلبات إضافية مثل:

• متطلبات عمل: وهو تصريح عما يحتاجه العميل.
• متطلبات مستخدمين: وتضم تصريحات عن طريق استخدام المنظومة.
• متطلبات منظومة: وتضم تصريحات عن أسلوب وطريقة بناء المنظومة.

ينتج عن مرحلة تحديد المتطلبات مستند يُدعى "تصريح تحديد المتطلبات requirements definition statement"ويضم المتطلبات الوظيفية وغير الوظيفية على شكل قائمة مفصّلة قد تُعطى فيها الأولوية لمتطلبات على أخرى إضافة إلى بعض المعلومات الضرورية للخطوات القادمة، كما يحدد هذا المستند ما يُدعى بنطاق عمل أو إطار عمل المنظومة system domain الذي ينبغي العمل في حدوده دون رفع أو تخفيض المتطلبات.

بناء نماذج تحليلية للمنظومة

يحاول فريق العمل خلال هذه المرحلة بناء نماذج models عن المتطلبات الوظيفية. وتوصِّف هذه المتطلبات مداخل ومخارج كل متطلب وطريقة تنفيذه. وغالبًا ما تُستخدم نماذج حالات الاستخدام use-case model التي توصّف كل وظيفة من وظائف المنظومة ومن سيشارك في إنجاز هذه الوظيفة سواء وظائف أخرى أو مستخدم خارجي، كما تُستخدم نماذج النشاط Activity models لتوصيف تسلسل تنفيذ العمليات التي تحقق وظيفة محددة وطريقة التفاعل المتبادل بين الوظائف المختلفة في المنظومة.

فلو كان لدينا مثلًا منظومة برمجية لإدارة صراف آلي ATM ستكون إحدى حالات الاستخدام هو "سحب نقود" وسترتبط حالة الاستخدام هذه بحالة استخدام أخرى "التحقق من هوية المستخدم" ولا بد من وجود مشارك خارجي وهو "مستخدم الصراف". إن ما يمثّل هذه الترابطات هو مخطط حالات الاستخدام أما بالنسبة لمخطط النشاط فسيوُصف على الشكل التالي مثلًا:

• الصراف: يعرض رسالة ترحيب.
• المستخدم: يدخل البطاقة.
• الصراف: يحلل البطاقة ويعرض للمستخدم قائمة الخيارات.
• المستخدم: يضغط زر "سحب النقود".
• الصراف: يعرض قائمة بالمبالغ التي يمكن سحبها.
• المستخدم: يختار المبلغ المطلوب.
• الصراف: يعدّ النقود ويخرجها.

تمثل هذه النماذج على شكل ملف يُدعى توصيف حالات الاستخدام use-case description أو عن طريق مخططات UML -لغة النمذجة الموحدة unified mark language- تُعرف بمخططات حالات الاستخدام ومخططات النشاط.

تُبنى بعد تكوين النماذج الوظيفية أيضًا النماذج البنوية التي تستفيد من نماذج حالات الاستخدام وملفات توصيفها في توصيف المتطلبات على شكل أصناف لها خصائص (سمات attributes) وطرق methods وذلك إن كانت استراتيجية التحليل هي استراتيجية كائنية التوجّه object oriented strategy وهي الاستراتيجية الأكثر شيوعًا. تمثّل هذه الأصناف ضمن مخططات تُدعى مخططات الأصناف ويُستفاد منها لاحقًا في عملية برمجة المتطلب الوظيفي.

وأخيرًا تُبنى النماذج السلوكية behavioral models وهي نماذج تعبّر عما يجري داخليًا خلف الستار حتى تؤدي المنظومة الوظائف المطلوبة منها ظاهريًا أي كما يراها المستخدم الخارجي. تتشكل هذه النماذج انطلاقًا من النماذج البنيوية والوظيفية لأنها تعبير عن التفاعل بين النماذج البنيوية (الكائنات التي تشكل المنظومة). وتُمثّل النماذج السلوكية باستخدام مخططات UML منها مخطط التتابع sequence diagram التي تمثل تتابع الرسائل بين الكائنات، ومخططات الاتصال communication diagram التي تمثل الطرق التي تسلكها تلك الرسائل ومخططات التوقيت timing diagrams.

ينتج عن هذه المرحلة ورقة تُدعى "اقتراح المنظومة system proposal" وتضم تفاصيل عن وظائف المنظومة الجديدة وطريقة إنجازها مُدعّمًا بالنماذج والمخططات التي بنيت في هذه المرحلة وتُرفع إلى لجنة القبول لاتخاذ القرار بالمضي أو إعادة تحليل المتطلبات.

مرحلة تصميم المنظومة البرمجية

وتجيب هذه المرحلة عن سؤال مهم وهو كيف سنبني المنظومة؟ إذ تُقرر في هذه المرحلة نوعية العتاد الصلب التي ستُستخدم والبرمجيات اللازمة والبنية التحتية لشبكات الاتصالات وواجهات المستخدم وقواعد البيانات ونماذج إرسال البيانات والتقارير.

تضم هذه المرحلة الخطوات التالية:

• وضع استراتيجية التصميم: وفيها يجيب فريق العمل بالتعاون مع الجهة المعنية عن الأسئلة التالية:
• هل ستُطوّر المنظومة محليًا في الجهة التي تحتاج المنظومة اعتمادًا على كوادرها الخاصة؟
• هل ستطور المشروع شركة مختصة أخرى؟
• هل ستشتري الشركة حزم برمجية جاهزة تحقق متطلبات مرحلة التحليل؟
• تطوير المعمارية الأساسية للمنظومة: بما في ذلك العتاد الصلب والبرمجي وواجهة المستخدم والبنية التحتية لشبكة الاتصال وهل سيتم البناء على البنية التحتية السابقة أم تحتاج المنظومة الجديدة إلى بنية تحتية جديدة كليًا.
• تطوير مواصفات لقواعد البيانات والملفات: أي تحديد طبيعة البيانات التي تُخزن وحجمها وأين وكيف ستُخزن.
• تصميم البرمجيات التي ستُبنى: أي ما هي البرامج التي ينبغي للمبرمجين العمل عليها وما وظيفة كل برنامج وما هي علاقته بغيره.

ينتج عن هذه المرحلة مجموعة المخرجات التالية:

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

تستخدم هذه المستندات لاحقًا في توجيه مرحلة إنجاز المنظومة.

مرحلة إنجاز المنظومة

وهي المرحلة الأخيرة من دورة تطوير البرمجيات، وتحظى هذه المرحلة بكامل الانتباه لأنها تعد المرحلة الأطول والأكثر تكلفة. تضم هذه المرحلة الخطوات التالية:

• بناء المنظومة
• اختبار المنظومة
• توثيق المنظومة
• تركيب المنظومة
• إدارة التغيير
• التدريب على استخدام المنظومة
• الصيانة ودعم المنظومة
• التقييم الراجع للمشروع

بناء المنظومة

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

اختبار المنظومة

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

• اختبارات الوحدات unit tests: ويجري على دالة أو صنف أو جزء محدد من وحدة برمجية للتأكد من أن الدخل الصحيح يعطي الخرج المطلوب.
• اختبارات التكامل integration tests: يختبر التفاعل المتبادل بين مجموعة محددة من الأصناف لإنجاز وظيفة محددة.
• اختبارت المنظومة system tests: يختبر تفاعل جميع الأصناف مع بعضها لإعطاء وظيفة متكاملة للمنظومة دون أخطاء، وهو مشابه لاختبار التكامل لكن على صعيد أوسع.
• اختبارات القبول acceptance tests: وينفذها المستخدمون النهائيون للمنظومة تحت إشراف عضو أو أكثر من فريق العمل وذلك لتقييم قبول المستخدم لهذه المنظومة الجديدة.

توثيق المنظومة

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

تركيب المنظومة

وتتضمن هذه الخطوة تثبيت العتاد الصلب والبرمجيات اللازمة وفقًا لمعايير المعيارية المقترحة.

إدارة التغيير

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

التدريب على استخدام المنظومة

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

الصيانة ودعم المنظومة

وهي عملية تحسين المنتج البرمجي كي يلبي دائمًا متطلبات العمل، وقد تكون خطوة الصيانة ذات تكلفة عالية. يُكلف بعملية الصيانة عادة محللو الأنظمة والمبرمجون المبتدئون. ويأتي دعم المنظومة عبر خيارات عدة منها:

• التدريب عند الطلب أو الحاجة.
• الدعم المباشر عبر الإنترنت: من خلال التوثيق والأسئلة أكثر شيوعًا وحتى المحادثة المباشرة.
• مكاتب الدعم: وذلك لاستشارة الخبراء مباشرة حول مشاكل محددة بناء على مواعيد مسبقة.

التقييم الراجع للمشروع

أي تقييم نجاح المشروع أو فشله والطرق الكفيلة بتحسينه وتطويره وأخذ العبر منه. وتنفذ هذه الخطوة عادة وفق مسارين:

• مراجعة منظومة: والهدف هو موازنة التكلفة والفائدة الحقيقية موازنة مع التكلفة والفوائد المقدرة في مرحلتي التخطيط والتحليل.
• مراجعة فريق العمل: إذ يقيِّم كل فرد من أفراد فريق العمل أخطاءه ونجاحاته في إنجاز المهام الموكلة إليه.

يمكن بعد ذلك لمدير المشروع أن يجمع التقييمات ويضيف إليها بعض التوضيحات والشروحات ليخرج بملف يُدعى "دروس تعلمناها lesson learned" والتي تلعب دورًا مهمًا في تدريب وتعليم الأعضاء الجدد وفي تفادي أية أخطاء مماثلة في مشاريع مستقبلية.

خاتمة

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

اقرأ أيضًا

• كيف تتجنب كارثة الاستعانة بفريق خارجي في تطوير البرمجيات
• دليل المبتدئين لمنهجية أجايل Agile
• الأخطاء السبع القاتلة لأيّ مشروع برمجيات

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

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

ما هو تطوير البرمجيات؟

عملية تطوير البرمجيات software development تشمل الخطوات والمناهج المتبعة في بناء وتصميم البرمجيات وكتابتها واختبارها وتجميعها، وتنطوي هذه العمليات على تفاصيل وأقسام كثيرة بداخلها سيأتي بيانها أدناه.

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

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

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

أنواع البرمجيات وبيئات عملها

البرمجيات كثيرة الأنواع ولكنها كلها في النهاية تعمل على عتاد حوسبي، ويكون هو البيئة التي تُنفذ فيها التعليمات البرمجية التي تحل المشكلة التي لدى العميل، وتتعدد تلك البيئات تعددًا لا يكاد يُحصر، لكنه يقع تحت فئات عامة يمكن حصرها وفقًا لنظام التشغيل كما يلي:

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

دورة علوم الحاسوب

دورة تدريبية متكاملة تضعك على بوابة الاحتراف في تعلم أساسيات البرمجة وعلوم الحاسوب

اشترك الآن

أنواع تطوير البرمجيات

يندرج تحت مظلة تطوير البرمجيات أقسام كثيرة تمثل مجالات ووظائف يمكن للمرء أن يعمل فيها، وتتنوع بتنوع مجال العمل وطبيعة المشاكل التي يجب حلها، والأدوات المتاحة للعمل.

تطوير الويب Web Development

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

تطوير الواجهات الأمامية

يعمل مطور الواجهات الأمامية Front End Developer في الغالب على تطوير الأجزاء التي سيراها المستخدم ويتفاعل معها من البرامج والتطبيقات، وإن كان هذا المجال يدخل في أي نوع من أنواع التطوير البرمجي التي تنتج برامج رسومية يتفاعل المستخدم معها باللمس أو المؤشر أو غيرها، إلا أنه يُستخدم في الغالب للإشارة إلى تطوير الواجهات الأمامية لتطبيقات الويب، ما لم يُذكر خلاف ذلك لتخصيصه لمجال آخر.

تطوير الواجهات الخلفية

يعمل مطور الواجهات الخلفية Back End Developer مثل زميله السابق في بيئة الويب في الغالب، ما لم يُذكر تخصيص يشير إلى غير ذلك، وهو يختص بتطوير التطبيقات التي تعمل على الخوادم التي تُخزن فيها تطبيقات الويب والمواقع، والتي تمثل البنى التحتية لتلك المواقع، ولا يركز على واجهات مرئية، وإنما يهتم بقواعد البيانات ومنطق التطبيق وكفاءة عمله واستهلاكه للموارد وسرعة تنفيذه، ومستوى أمانه.

تطوير التطبيقات المكتبية

يُقصد بها التطبيقات التي تعمل على الحواسيب المكتبية والحواسيب المحمولة Laptops، والتي تكون في الغالب على أنظمة تشغيل مثل ويندوز ولينكس وماك، وهي البرامج المعتادة للأعمال المكتبية للأفراد والشركات، مثل أطقم المكتب وبرامج البريد والتقويم ومتصفحات الويب وبرامج الحسابات وغيرها.

وكذلك البرامج المتخصصة الموجهة للعاملين في تطوير البرمجيات أنفسهم، مثل بيئات التطوير المتكاملة IDEs والمحررات النصية والمصرِّفات، وبرامج التصميم المرئي للعاملين في تطوير الواجهات الأمامية والمصممين، وكذلك برامج التصميم الهندسي للمهندسين، وبرامج تحرير الصوتيات والفيديو، فمثل تلك البرمجيات تحتاج إلى الموارد القوية للحواسيب المكتبية، ولا تصلح في الغالب أن تعمل بنفس الكفاءة على الهواتف مثلًا ذات الإمكانيات المحدودة.

تطوير تطبيقات الهواتف

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

هذا المجال كبير واسع فكما أشرنا نظرًا لازدياد الأجهزة المحمولة حولنا والتي أصبحت تتعدى الهاتف المحمول إلى أجهزة ملبوسة وأجهزة مساعدة ذكية وغيرها وكلها تحتاج إلى برمجة وتحتاج إلى تطبيقات لتؤدي الغرض المطلوب منها، ويطول المقال إن أردنا التفصيل فيه، ويمكنك الرجوع إلى مقال برمجة تطبيقات الجوال ففيه تفصيل أكبر.

تطوير التطبيقات السحابية

زاد انتشار هذا المجال مؤخرًا مع ازدياد القوة الحوسبية للخوادم وإتاحة العمل المشترك بين الفرق العاملة عن بعد، أو لمن يرغب في الوصول إلى إمكانيات هائلة القوة لفترة محدودة من أجل إجراء عمليات حسابية معقدة أو إخراج تصميمات كبيرة.

التطبيقات السحابية هي تطبيقات وخدمات تعمل على خوادم وحواسيب بعيدة -السحابة- تتبع الشركات المالكة لتلك البرمجيات والتطبيقات، أو تتبع شركات استضافة تحجز تلك الحواسيب لمن يرغب في استضافة تطبيقه عليها سواء كان فردًا أو شركة.

ويستطيع المستخدم أو فريق العمل الوصول إلى تلك التطبيقات من أي جهاز متصل بالإنترنت، وتنفيذ المهام المطلوبة دون الحاجة إلى امتلاك المستخدم لحاسوب بنفس القوة المطلوبة لتنفيذ المهمة، فما هو إلا منصة وواجهة أو طرفية يصل منها إلى الحاسوب البعيد القوي، وتُنفذ العمليات بالكامل على الحاسوب البعيد.

أدوات تطوير البرمجيات

بعد أن عرفنا أشهر الأنواع الموجودة في مجالات تطوير البرمجيات، نأتي الآن إلى الأدوات التي يستخدمها أولئك المبرمجون في تنفيذ أعمالهم وتطوير برمجياتهم.

حاسوب

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

قد تتساءل عن مواصفات الحاسوب المناسب، وهذا يعتمد على مجال تطوير البرمجيات الذي تريد التخصص فيه، وعمومًا إن كانت عملية التطوير لا تحتاج إلى تعامل مع رسوميات، فمعظم الحواسيب الجديدة حاليًا تفي بالغرض، وارجع إلى سؤال مواصفات الحاسوب الخاص بالبرمجة وسؤال الحاسوب المناسب لتعلم البرمجة ففيهما تفصيل في هذا الموضوع.

لغة برمجة

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

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

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

عدة تطوير البرمجيات Development Kit

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

تختلف العدة باختلاف تخصص تطوير البرمجيات الذي تحدده لذا لا تشغل بالك حاليًا بها، وستتعرف عليها بمجرد اختيار التخصص المناسب لك.

خطوات تطوير البرمجيات

يبدأ العمل على تطوير التطبيقات بتحليل المشكلة أولًا التي تكون لدى العميل ويحتاج إلى تطبيق برمجي لحلها، ثم تمر بعدة خطوات ومراحل إلى أن تصل إلى المنتج النهائي.

تحليل المشكلة

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

اختيار منهجية العمل

لعل هذه لا تتغير من مشروع إلى آخر أو من تطبيق إلى آخر، وإنما تظل ثابتة لنفس فريق العمل أو نفس الشركة، وذلك لأنها تتعلق بنمط عمل الفريق نفسه وليس طريقة عمل التطبيق، وأشهر منهجيات العمل ما يلي:

• منهج الشلال Waterfall: تُكتب البرامج وفقًا لهذا المنهج على مراحل متتالية، بحيث لا يبدأ العمل في مرحلة إلا بعد تمام التي قبلها.

• المنهج المرن Agile: وهذا المنهج يقسم فريق التطوير إلى مجموعات يوكل إلى كل منها جزء من العمل، ويعملون في نفس الوقت لتقليل الوقت اللازم لإتمام المشروع، ويغلب على هذا المنهج أن يتبع العاملون فيه أسلوب Scrum، الذي يضع بعض القواعد لإدارة فريق العمل لضمان إتمام المشروع على أكمل وجه في أقصر مدة ممكنة.

الجدير بالذكر هنا أن أسلوب العمل المرن وكذلك أسلوب Scrum لا يقتصران على تطوير التطبيقات البرمجية فقط، وإنما يتعديانها إلى كثير من المجالات الصناعية بما أنهما أسلوبين لإدارة المشاريع أصلًا وليسا مقتصرين على تطوير برمجيات، وارجع إلى مقال المراسم الأربعة لمنهجية أجايل Agile ceremonies لمزيد من التفصيل.

النموذج الأولي Prototype

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

ثم يلتقي الفريق -أو المستقل مع العميل- في كل صباح أو كل فترة محددة لمناقشة ما تم إنجازه، وحل المشاكل التي طرأت، وتعديل سير العمل وفق المعطيات الجديدة.

مرحلة الاختبار

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

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

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

الإطلاق الأولي Soft Launch

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

الإطلاق النهائي Hard launch

في هذه المرحلة يكون التطبيق قد نضج، وتختلف المدة اللازمة لنضج التطبيق ووصوله إلى مرحلة الإطلاق النهائي وفقًا للتطبيق نفسه وحجم المزايا التي فيه، وبيئة العمل التي سيعمل فيها، فبعض البيئات لا تحتمل نسب الخطأ أو تكراره، كما في حالة الآلات التي سيحمَّل عليها التطبيق ولا سبيل للوصول إليه بعدها إلا بصعوبة بالغة، مثل السيارات والأجهزة المنزلية، أو لا يمكن السماح بنسبة خطأ كبيرة غير محسوبة، كما في حالة آلات المصانع والسيارات، وهكذا.

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

كيف تصبح مطور برمجيات؟

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

وتحتاج إلى بعض المهارات الشخصية أولًا لتتميز في مجال تطوير التطبيقات، ثم إلى معرفة بالتقنيات والأدوات المطلوبة للعمل نفسه.

المهارات الشخصية لمطور البرمجيات

سنركز هنا على المهارات التي يحتاج إليها المطور خاصة والتي تفيده مباشرة في مسيرته المهنية كمطور، وليس المهارات العامة لأي عامل مستقل أو موظف.

الطلب المستمر للعلم

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

وليهتم بدراسة علوم الحاسوب اﻷساسية التي تُبنى عليها التقنيات والأدوات الجديدة، ليسهل عليه استيعاب تلك التقنيات في بضعة أيام ثم بدء العمل بها مباشرة، فكم رأيت من مبرمج درس القواعد والأساسات الخاصة بعلم الحاسوب، فلما احتاج إلى تطوير تطبيق للهواتف مثلًا عكف على تعلم لغة البرمجة Swift فدرس أساسياتها ثم عمل مباشرة على التطبيق بعد أسبوع من دراستها، لأنه يعلم منطقها والأساسات التي بنيت عليها كما بينا من قبل في هذا المقال.

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

التفكير المنطقي

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

الأمر الجميل في البرمجة أن أغلب المشاكل التي ستواجه المطور قد واجهت غيره من قبل، ووُضعت لها الحلول وصُنفت فيها الكتب والتوثيقات، لهذا كانت مهارة حب العلم لازمة للمطور، فسيجد أغلب وقته يقرأ مبحرًا في التوثيقات البرمجية ومناهج حل المشاكل المنطقية للبرمجيات.

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

وقد فصلنا كثيرًا حول هذه النقطة في مقال حل المشكلات وأهميتها في احتراف البرمجة فارجع إليه لمزيد من الفائدة.

المهارات التقنية

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

يمكن كسب المهارات التقنية وتعلمها من عدة مصادر منها الدراسة الجامعية والدورات التعليمية، وعادة تكون الدراسة الجامعية طويلة أربع سنوات على الأقل ومليئة بالمواد النظرية البعيدة عن سوق العمل، أما الدورات التعليمية المتخصصة فقد أصبحت الأسلوب الشائع لدخول مجال هندسة وتطوير البرمجيات لأنها تعطي المتعلم ما ينفعه لبناء البرمجيات ودخول سوق العمل وأجمل ما في الأمر أن الشهادات التي تُعطى فيها معترفة وتغني عن الشهادة الجامعية.

وقدمت أكاديمية حسوب الكثير من تلك الدورات التعليمية المتخصصة الاحترافية لتعلم تطوير البرمجيات ودخول سوق العمل مباشرةً، مثل دورة علوم الحاسوب لتعليم أساسيات ومفاهيم مجال علوم الحاسوب بالكامل ودورة تطوير التطبيقات باستخدام لغة Python لتعلم تطوير تطبيقات للويب أو لسطح المكتب أو دورة تطوير التطبيقات باستخدام لغة JavaScript وغيرها وارجع إلى صفحة الدورات التعليمية للاطلاع على كافة الدورات الموجودة.

سوق العمل كمطور برمجيات

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

أو إذا أراد، يمكنه التقديم على الوظائف البعيدة التقنية لمطوري التطبيقات عبر منصة بعيد، لتكون عملًا نظاميًا بدوام جزئي أو كلي، على عكس العمل الحر كما في منصتي مستقل وخمسات.

خاتمة

رأينا في هذا المقال مرورًا سريعًا على مجال تطوير التطبيقات البرمجية، وحاجة السوق إليه، وأنواع تطوير التطبيقات ومنصاتها، والمهارات التي يحتاج إليه المطور في عمله.

وربما لا توجد عبارات تصف مدى حاجة السوق العالمي عمومًا والعربي خاصة إلى مطوري التطبيقات المهرة هذه الأيام، والأفضلية التي تكون لهؤلاء في السوق إذ لا تحدّهم حدود جغرافية، ولا أزمات محلية، بل تُفتح لهم فرص العمل بأجور تنافسية عالية موازنة ببقية الوظائف، مع عملاء من مختلف الدول.

اقرأ أيضًا

• تعلم البرمجة 
• تعرف على تخصص هندسة البرمجيات
• دليلك الشامل إلى برمجة التطبيقات
• مقال دليلك الشامل إلى تعلم البرمجة
• دليل المبتدئين لمنهجية أجايل Agile

نستعرض في هذا الفيديو ما هو OpenAPI ومميزاته، وكيف يفيد المبرمجين أثناء العمل على تطوير الواجهات الأمامية والخلفية، كوسيلة موحدة يستطيع فيها مطور الواجهات الخلفية أن يعطي معلومات API endpoints إلى مطور الواجهات الأمامية، كما سنتحدث عن بنية OpenAPI Specification.

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

يشرح الفيديو مفهوم تطبيقات الويب التقدمية PWA ويوضح الفرق بينها وبين تطبيقات الويب العادية.

إذا أردت التعرف أكثر على تطبيقات الويب، فننصحك بتعلم تطوير التطبيقات باستخدام لغة JavaScript في أكاديمية حسوب، ولا تنسَ الاستعانة خلال رحلة تعلمك وعملك بتوثيقات موسوعة حسوب المجانية. وإذا أردت متابعة المعلومات البرمجية العلمية مكتوبة فيمكنك الاطلاع على قسم البرمجة في أكاديمية حسوب، كما يمكنك متابعة جديد الفيديوهات التقنية المتاحة على يوتيوب أكاديمية حسوب مجانًا.

سنتعلم في هذا المقال كيفية تثبيت بيئة الاختبارات الآلية وإجراء اختباراتك باستخدام نظام Selenium/WebDriver ومكتبة اختبار مثل selenium-webdriver في Node، وسنتعرّف على كيفية دمج بيئة اختبارك المحلية مع الأدوات التجارية مثل الأدوات التي ناقشناها في المقال السابق.

• المتطلبات الأساسية: يجب أن تتعلم أساسيات لغات HTML و CSS وجافاسكربت JavaScript، وأن يكون لديك فكرة عن المبادئ عالية المستوى لاختبار التوافق مع المتصفحات المختلفة والاختبارات الآلية.
• الهدف: معرفة كيفية إعداد بيئة اختبار Selenium محليًا وتشغيل الاختبارات باستخدامه، وكيفية دمجه مع أدوات مثل LambdaTest و Sauce Labs و BrowserStack.

نظام الاختبار Selenium

يُعَدّ نظام Selenium أشهر أداة لاختبار المتصفحات آليًا، وهناك طرق متعددة لاستخدام Selenium، ولكن أفضل طريقة لاستخدامه هي عبر WebDriver التي تُعَد واجهة برمجة تطبيقات API مبنية على نظام Selenium وتجري استدعاءات للمتصفح لجعله آليًا من خلال تنفيذ إجراءات مثل "افتح صفحة الويب" و"انقل هذا العنصر في الصفحة" و"انقر على هذا الرابط" و"تأكد مما إذا كان هذا الرابط يفتح عنوان URL" وغير ذلك، كما يُعَدّ ذلك مثاليًا لإجراء الاختبارات الآلية.

تعتمد كيفية تثبيت واجهة WebDriver واستخدامها على البيئة البرمجية التي تريد استخدامها لكتابة الاختبارات وتشغيلها، كما تحتوي معظم البيئات الشائعة على حزمة أو إطار عمل يثبّت واجهة WebDriver والارتباطات المطلوبة للتواصل معها باستخدام هذه اللغة مثل لغات Java و C#‎ و Ruby و Python و JavaScript (Node)‎ وغيرها.

تتطلب المتصفحات المختلفة مشغّلات Drivers مختلفة للسماح لواجهة WebDriver بالاتصال والتحكم بها، وراجع المنصات التي يدعمها Selenium للحصول على مزيد من المعلومات حول مكان الحصول على مشغّلات المتصفحات.

سنغطّي كتابة وتشغيل اختبارات Selenium باستخدام Node.js التي تُعَدّ سريعةً وسهلة الاستخدام وبيئةً مألوفةً أكثر لمطورِي الواجهة الأمامية.

إعداد Selenium في Node

1. أعِدّ أولًا مشروع npm جديد كما ناقشنا في قسم إعداد Node و npm في المقال السابق، وسمِّ هذا المشروع باسم مختلف مثل selenium-test.
2. يجب بعد ذلك تثبيت إطار عمل للسماح بالتعامل مع Selenium ضمن Node، كما سنختار مكتبة selenium-webdriver الرسمية الخاصة بنظام Selenium، فتوثيقها محدثٌ إلى حد ما وتُطبَّق صيانتها جيدًا، وتوجد خيارات أخرى جيدة مثل webdriver.io و nightwatch.js، كما يمكنك تثبيت selenium-webdriver من خلال تشغيل الأمر التالي مع التأكد من أنك ضمن مجلد مشروعك:

npm install selenium-webdriver

ملاحظة: لا يزال اتباع الخطوات السابقة أمرًا جيدًا حتى إذا ثَبَّتَّ selenium-webdriver ونزّلتَ مشغّلات المتصفح مسبقًا، إذ يجب عليك التأكد من تحديث كل شيء.

يجب بعد ذلك تنزيل المشغّلات ذات الصلة لتتمكّن WebDriver من التحكم في المتصفحات التي تريد اختبارها. تُعَد بعض المتصفحات خاصة بنظام التشغيل، لذلك سنلتزم باستخدام فايرفوكس Firefox وكروم Chrome المتوفرَين على جميع أنظمة التشغيل الرئيسية.

1. نزّل الإصدار الأحدث من المشغّلات GeckoDriver (لمتصفح Firefox) و ChromeDriver.
2. فك ضغطها في مكان يسهل الانتقال إليه مثل جذر مجلد مستخدمك الرئيسي.
3. أضِف موقع مشغّل chromedriver و geckodriver إلى المتغير PATH في نظامك، ويجب أن يكون هذا الموقع مسارًا مطلقًا من جذر قرصك الصلب إلى المجلد الذي يحتوي على المشغّلات، فإذا استخدمت جهاز macOS وكان اسم مستخدِمك هو sami ووضعت المشغّلات في جذر المجلد الرئيسي مثلًا، فسيكون المسار ‎/Users/sami.

ملاحظة: يجب أن يكون المسار الذي تضيفه إلى المتغير PATH هو المسار إلى المجلد الذي يحتوي على المشغّلات، وليس المسارات المؤدية إلى المشغّلات نفسها، فهذا خطأ شائع.

يمكنك ضبط المتغير PATH على نظام macOS ومعظم أنظمة لينكس كما يلي:

1. إذا لم تستخدِم صدفة bash مثل أنظمة macOS التي يكون فيها الإعداد الافتراضي هو صدفة zsh وليس bash، فبدّل إلى صدفة bash كما يلي:

exec bash

2. افتح ملف ‎.bash_profile أو ‎.bashrc، فإذا لم تتمكن من رؤية الملفات المخفية، فستحتاج لعرضها.
3. الصق ما يلي في أسفل الملف (عدّل المسار كما هو على جهازك):

#Add WebDriver browser drivers to PATH

export PATH=$PATH:/Users/sami

4. احفظ هذا الملف وأغلقه، ثم أعِد تشغيل موجّه الأوامر أو الطرفية لإعادة تطبيق إعداد Bash.
5. تحقق من وجود مساراتك الجديدة في المتغير PATH من خلال إدخال ما يلي في طرفيتك:

echo $PATH

6. يجب أن تراه مطبوعًا في الطرفية.

لنجرب اختبارًا سريعًا للتأكد من أن كل شيء يعمل.

أولًا، أنشئ ملفًا جديدًا ضمن مجلد مشروعك بالاسم google_test.js.

ثانيًا، ضع فيه المحتويات التالية ثم احفظه:

const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

const driver = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

driver.get('http://www.google.com');

driver.findElement(By.name('q')).sendKeys('webdriver');

driver.sleep(1000).then(function() {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

driver.findElement(By.name('btnK')).click();

driver.sleep(2000).then(function() {
  driver.getTitle().then(function(title) {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
    driver.quit();
  });
});

ثالثًا، تأكد من أنك ضمن مجلد مشروعك في الطرفية ثم أدخِل الأمر التالي:

node google_test

يجب أن ترى متصفح Firefox يفتح تلقائيًا، ويجب تحميل جوجل تلقائيًا في تبويب المتصفح، وإدخال النص "webdriver" في مربع البحث، وسيُنقَر على زر البحث، ثم ستنتظر بعدها WebDriver لمدة ثانيتين، ثم يجب الوصول إلى عنوان المستند، وإذا كان النص "webdriver - Google Search"، فستُعاد رسالة تعبِّر عن اجتياز الاختبار، ثم ستغلِق WebDriver المتصفحَ Firefox وتتوقف.

اختبار متصفحات متعددة في وقت واحد

لا يوجد شيء يمنعك من تشغيل الاختبار على متصفحات متعددة في وقت واحد، إذًا لنجرّب ذلك.

أولًا، أنشئ ملفًا جديدًا آخر ضمن مجلد مشروعك بالاسم googletestmultiple.js، ولا تتردد في تغيير المراجع إلى بعض المتصفحات الأخرى التي أضفناها أو إزالتها وغير ذلك اعتمادًا على المتصفحات المتاحة للاختبار على نظام تشغيلك، ولكن يجب التأكد من إعداد مشغّلات المتصفحات الصحيحة على نظامك، فإذا أردت معرفة السلسلة النصية المراد استخدامها ضمن التابع ‎.forBrowser()‎ للمتصفحات الأخرى، فراجع صفحة قائمة المتصفحات.

ثانيًا، ضع المحتويات التالية في هذا الملف ثم احفظه:

const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

let driver_fx = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

let driver_chr = new webdriver.Builder()
    .forBrowser('chrome')
    .build();

searchTest(driver_fx);
searchTest(driver_chr);

function searchTest(driver) {
  driver.get('http://www.google.com');
  driver.findElement(By.name('q')).sendKeys('webdriver');

 driver.sleep(1000).then(() => {
    driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
  });

  driver.findElement(By.name('btnK')).click();

 driver.sleep(2000).then(() => {
    driver.getTitle().then((title) => {
      if(title === 'webdriver - Google Search') {
        console.log('Test passed');
      } else {
        console.log('Test failed');
      }
      driver.quit();
    });
  });

}

تأكد من أنك ضمن مجلد مشروعك في الطرفية ثم أدخِل الأمر التالي:

node google_test_multiple

إذا استخدمت جهاز ماك Mac وقررت اختبار المتصفح سفاري Safari، فيمكن أن تتلقى رسالة خطأ مثل "Could not create a session: You must enable the 'Allow Remote Automation' option in Safari's Develop menu to control Safari via WebDriver"، فإذا حصلت على هذا الخطأ، فاتبع التعليمات المُعطاة وحاول مرةً أخرى.

أجرينا هنا الاختبار مثل الاختبار السابق باستثناء أننا غلّفناه هذه المرة ضمن الدالة searchTest()‎، وأنشأنا نسخًا من متصفحات جديدة ثم مررنا كلًا منها إلى الدالة لإجراء الاختبار على المتصفحات الثلاثة.

لنلقِ نظرةً الآن على أساسيات صياغة واجهة WebDriver بمزيد من التفاصيل.

أساسيات صياغة WebDriver

لنلقِ نظرةً على بعض الميزات الرئيسية لصياغة Webdriver، ويمكنك الحصول على مزيد من التفاصيل من خلال الرجوع إلى مرجع واجهة برمجة تطبيقات جافاسكربت selenium-webdriver وتوثيق Selenium الرئيسي الذي يحتوي على أمثلة متعددة مكتوبة بلغات مختلفة للتعلم منها.

بدء اختبار جديد

يجب تضمين الوحدة selenium-webdriver كما يلي لبدء اختبار جديد:

const webdriver = require('selenium-webdriver');
const By = webdriver.By;
const until = webdriver.until;

يجب بعد ذلك إنشاء نسخة جديدة من المشغّل باستخدام الباني new webdriver.Builder()‎، ولكن يجب ربط التابع forBrowser()‎ بها لتحديد المتصفح الذي تريد اختباره باستخدام هذا الباني، والتابع build()‎ لبنائه.

let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

لاحظ أنه يمكن ضبط خيارات إعدادات محددة للمتصفحات المراد اختبارها، إذ يمكنك مثلًا ضبط إصدار معيّن من المتصفح ونظام التشغيل للاختبار ضمن التابع forBrowser()‎ كما يلي:

let driver = new webdriver.Builder()
    .forBrowser('firefox', '46', 'MAC')
    .build();

كما يمكنك ضبط هذه الخيارات باستخدام متغير البيئة كما يلي على سبيل المثال:

SELENIUM_BROWSER=firefox:46:MAC

لننشئ اختبارًا جديدًا من خلال إنشاء ملف جديد بالاسم quick_test.js ضمن مجلد مشروعك لاختبار Selenium وأضِف الشيفرة البرمجية التالية إليه:

const webdriver = require('selenium-webdriver');
const By = webdriver.By;
const until = webdriver.until;

const driver = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

الحصول على الصفحة الذي تريد اختبارها

يمكنك تحميل الصفحة التي تريد اختبارها من خلال استخدام التابع get()‎ مع نسخة المشغّل التي أنشأتها مسبقًا كما يلي:

driver.get('http://www.google.com');

يمكنك استخدام أيّ عنوان URL للإشارة إلى موردك، بما في ذلك العنوان file://‎ لاختبار مستند محلي كما يلي:

driver.get('file:///Users/chrismills/git/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html');

أو كما يلي:

driver.get('http://localhost:8888/fake-div-buttons.html');

لكن يُفضَّل استخدام موقع خادم بعيد بحيث تكون الشيفرة البرمجية أمرن، فإذا استخدَمت خادمًا بعيدًا لإجراء اختباراتك، فستُعطَّل شيفرتك إذا حاولت استخدام المسارات المحلية.

أضِف السطر التالي في نهاية الملف quick_test.js:

driver.get('https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html');

التفاعل مع الصفحة

لدينا مستند للاختبار، لذا يجب التفاعل معه بطريقة ما تتضمن تحديد عنصر معيّن أولًا لاختباره، ويمكنك تحديد عناصر واجهة المستخدِم بعدة طرق في WebDriver بما في ذلك استخدام المعرّف ID والصنف Class واسم العنصر وغير ذلك، كما يمكن تحقيق تحديد العنصر الفعلي باستخدام التابع findElement()‎ الذي يقبل تابعَ تحديد بوصفه معاملًا له، إذ يمكن مثلًا تحديد عنصر باستخدام المعرّف كما يلي:

const element = driver.findElement(By.id('myElementId'));

إحدى أكثر الطرق المفيدة للعثور على عنصر باستخدام لغة CSS هي استخدام التابع By.css الذي يسمح بتحديد عنصر باستخدام محدَّد CSS.

أدخِل ما يلي في الجزء السفلي من شيفرة الملف quick_test.js:

const button = driver.findElement(By.css('button:nth-of-type(1)'));

اختبار العنصر

إذا أردت إدخال نص ضمن الزر، فيمكننا استخدام ما يلي ضمن الملف quick_test.js:

button.getText().then((text) => {
  console.log(`Button text is '${text}'`);
});

تأكد من أنك ضمن مجلد المشروع وشغّل الاختبار كما يلي:

node quick_test.js

يجب أن ترى تسمية نص الزر في الطرفية.

احذف إدخال الشيفرة السابقة ثم أضِف السطر التالي عوضًا عنه:

button.click();

شغّل اختبارك مرةً أخرى، إذ سيُنقَر على الزر وستظهر نافذة التنبيه alert()‎ المنبثقة، وسنعلَم بذلك أنّ الزر يعمل على الأقل.

كما يمكنك التفاعل مع النافذة المنبثقة من خلال إضافة ما يلي إلى أسفل الشيفرة البرمجية واختبارها مرةً أخرى:

const alert = driver.switchTo().alert();

alert.getText().then((text) => {
  console.log(`Alert text is '${text}'`);
});

alert.accept();

لنحاول بعد ذلك إدخال نص في أحد عناصر النموذج، لذا أضِف الشيفرة التالية وشغّل اختبارك مرةً أخرى:

const input = driver.findElement(By.id('name'));
input.sendKeys('Filling in my form');

يمكنك إرسال ضغطات على المفاتيح التي لا يمكن تمثيلها بمحارف عادية باستخدام خاصيات الكائن webdriver.Key، وقد استخدمنا سابقًا البناء التالي مثلًا للخروج من حقل إدخال النموذج قبل الإرسال:

driver.sleep(1000).then(() => {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

انتظار اكتمال شيء ما

تريد في بعض الأحيان جعل واجهة WebDriver تنتظر حتى يكتمل شيء ما قبل المتابعة، فإذا حمّلت صفحةً جديدةً مثلًا، فيجب عليك الانتظار حتى ينتهي تحميل نموذج DOM الخاص بالصفحة قبل محاولة التفاعل مع أيّ من عناصره، وإلّا فيُحتمَل أن يفشل الاختبار.

ضمّن الكتلة التالية في اختبار الملف google_test.js مثلًا:

driver.sleep(2000).then(() => {
  driver.getTitle().then((title) => {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
  });
});

يقبل التابع sleep()‎ قيمةً تحدد وقت الانتظار بالميلي ثانية ويعيد وعدًا يُؤكَّد في نهاية ذلك الوقت وتُنفَّذ الشيفرة البرمجية الموجودة ضمن التابع then()‎، إذ نحصل في هذه الحالة على عنوان الصفحة الحالية باستخدام التابع getTitle()‎ ثم نعيد رسالة نجاح أو فشل اعتمادًا على قيمة هذا العنوان.

كما يمكننا إضافة التابع sleep()‎ إلى اختبار الملف quick_test.js، لذا غلّف آخر سطر من الشيفرة البرمجية ضمن كتلة كما يلي:

driver.sleep(2000).then(() => {
  input.sendKeys('Filling in my form');
  input.getAttribute("value").then((value) => {
    if(value !== '') {
      console.log('Form input editable');
    }
  });
});

ستنتظر واجهة WebDriver الآن لمدة ثانيتين قبل ملء حقل النموذج ثم نختبر مما فيما إذا كانت قيمته مملوءةً -أي ليست فارغةً- باستخدام التابع getAttribute()‎ لاسترداد قيمة السمة value وطباعة رسالة في الطرفية إذا لم تكن فارغةً.

ملاحظة: هناك تابع بالاسم wait()‎ يختبر بطريقة تكرارية شرطًا لفترة زمنية معينة ثم ينفّذ الشيفرة البرمجية، إذ يستخدِم هذا التابع المكتبة until التي تحدِّد الشروط الشائعة للاستخدام مع التابع wait()‎.

إغلاق المشغلات بعد الانتهاء من استخدامها

يجب عليك إغلاق أيّ نسخ من المشغّلات التي فتحتها بعد الانتهاء من إجراء الاختبار للتأكد من عدم وجود الكثير من نسخ المتصفحات المفتوحة على جهازك من خلال استخدام التابع quit()‎.

استدعِ هذا التابع على نسخة مشغّلك عند الانتهاء منه من خلال إضافة السطر التالي إلى الجزء السفلي من اختبار الملف quick_test.js:

driver.quit();

يجب أن ترى الآن عند تشغيله تنفيذَ الاختبار وإغلاق نسخة المتصفح مرةً أخرى بعد اكتمال الاختبار، ويُعَدّ ذلك مفيدًا لتقليل الفوضى في حاسوبك بسبب وجود الكثير من نسخ المتصفح خاصةً إذا كان لديك الكثير منها مما يتسبب في إبطاء الحاسوب.

أفضل ممارسات في عملية الاختبار

يجب أن تتأكد من أن اختباراتك تطبّق ما يلي:

أولًا، تستخدِم استراتيجيات جيدة لتحديد المواقع: تأكّد عند التفاعل مع المستند من استخدام محدّدات المواقع وكائنات الصفحة التي لا يُحتمَل أن تتغير، فإذا كان لديك عنصر قابل للاختبار تريد إجراء اختبار عليه، فتأكد من أنه يملك معرّفًا مستقرًا أو موضعًا على الصفحة يمكن تحديده باستخدام محدّد CSS الذي لن يتغير مع تكرار الموقع التالي، إذ يجب أن تجعل اختباراتك مستقرةً قدر الإمكان، أي أنها لن تنهار عندما يتغير شيء ما.

ثانيًا، تكتب اختبارات ذرية: يجب أن يختبر كل اختبار شيئًا واحدًا فقط، مما يسهل تعقّب ملف الاختبار الذي يختبر معيارًا معينًا، ويُعَدّ اختبار الملف google_test.js الذي ناقشناه سابقًا مثالًا جيدًا لأنه يختبر شيئًا واحدًا فقط، إذ يختبر ما إذا كان عنوان صفحة نتائج البحث مضبوطًا بصورة صحيحة، كما يمكننا إعطاء هذا الملف اسمًا أفضل حتى يسهل معرفة ما يفعله إذا أضفنا اختبارات جوجل أخرى مثل الاسم results_page_title_set_correctly.js.

ثالثًا، تكتب اختبارات مستقلة: يجب أن يعمل كل اختبار بمفرده دون الاعتماد على اختبارات أخرى للعمل.

كما يجب أن نذكر نتائج أو تقرير الاختبار، إذ أصدرنا تقريرًا بالنتائج في الأمثلة السابقة باستخدام تعليمات console.log()‎ البسيطة، ولكن يحدث كل ذلك في شيفرة جافاسكربت، لذا يمكنك استخدام أيّ نظام اختبار تريده لتشغيل الاختبار وإعداد التقارير سواءً كان Mocha أو Chai أو أيّ أداة أخرى.

أولًا، أنشئ مثلًا نسخةً محليةً من المثال mocha_test.js ضمن مجلد مشروعك، ثم ضع هذا الملف ضمن مجلد فرعي بالاسم test، إذ يستخدِم هذا المثال سلسلةً طويلةً من الوعود لتنفيذ جميع الخطوات المطلوبة في اختبارنا، حيث يجب تأكيد التوابع المستندة إلى الوعود التي تستخدمها WebDriver حتى تعمل بطريقة صحيحة.

ثانيًا، ثبّت أداة الاختبار Mocha عبر تشغيل الأمر التالي ضمن مجلد مشروعك:

npm install --save-dev mocha

يمكنك الآن تشغيل الاختبار وأيّ اختبارات أخرى تضعها ضمن مجلد test باستخدام الأمر التالي:

npx mocha --no-timeouts

يجب عليك تضمين الراية ‎--no-timeouts للتأكد من عدم فشل اختباراتك بسبب مهلة Mocha التي هي 3 ثوان.

إجراء الاختبارات عن بعد

اتضح أنّ إجراء الاختبارات على الخوادم البعيدة ليس أصعب من تشغيلها محليًا، إذ يجب فقط إنشاء نسخة من مشغّلك مع تحديد عدد من الميزات الإضافية بما في ذلك إمكانات المتصفح الذي تريد تطبيق الاختبار عليه وعنوان الخادم وبيانات ثبوتيات المستخدِم التي تحتاجها -إذا وجِدت- للوصول إليه.

LambdaTest

يُعَدّ إجراء اختبارات Selenium عن بُعد على نظام LambdaTest أمرًا بسيطًا، ويجب أن تتّبع الشيفرة البرمجية التي تحتاجها النمطَ الآتي.

إذًا لنكتب مثالًا يوضّح إجراء اختبارات Selenium عن بُعد على نظام LambdaTest:

أولًا، أنشئ ملفًا جديدًا بالاسم lambdatest-google_test.js ضمن مجلد المشروع.

ثانيًا، ضع فيه المحتويات التالية:

const webdriver = require('selenium-webdriver');
const By = webdriver.By;
const until = webdriver.until;

// username: يمكن العثور على اسم المستخدِم في لوحة تحكم الأتمتة
const USERNAME = '{username}';

// AccessKey: يمكن توليد مفتاح الوصول من لوحة تحكم الأتمتة أو قسم الملف الشخصي
const KEY = '{accessKey}';

// gridUrl: يمكن العثور عليه في لوحة تحكم الأتمتة
const GRID_HOST = 'hub.lambdatest.com/wd/hub';

function searchTextOnGoogle() {
// إعداد إمكانات الإدخال
    const capabilities = {
       platform: 'windows 10',
       browserName: 'chrome',
       version: '67.0',
       resolution: '1280x800',
       network: true,
       visual: true,
       console: true,
       video: true,
       name: 'Test 1', // اسم الاختبار
       build: 'NodeJS build' // اسم البناء
     };

// URL: https://{username}:{accessToken}@hub.lambdatest.com/wd/hub

const gridUrl = `https://${USERNAME}:${KEY}@${GRID_HOST}`;

// إعداد وبناء كائن مشغّل‫ selenium
 const driver = new webdriver.Builder()
    .usingServer(gridUrl)
    .withCapabilities(capabilities)
    .build();

// ‫انتقل إلى عنوان url، وابحث عن نص واحصل على عنوان الصفحة
driver.get('https://www.google.com/ncr').then(function() {
    driver.findElement(webdriver.By.name('q')).sendKeys('LambdaTest\n').then(function() {
         driver.getTitle().then((title) => {
               setTimeout(() => {
                 console.log(title);
                 driver.quit();
                 }, 5000);
            });
         });
      });
   }

searchTextOnGoogle();

ثالثًا، انتقل إلى لوحة تحكم أتمتة LambdaTest لجلب اسم مستخدِم LambdaTest ومفتاح الوصول من خلال النقر على رمز المفتاح في أعلى اليمين، حيث سترى اسم المستخدِم Username ومفاتيح الوصول Access Keys، واستبدل العناصر البديلة {username} و {accessKey} في شيفرتك باسم المستخدِم وقيم مفتاح الوصول الفعلية وتأكّد من الحفاظ عليها آمنةً.

رابعًا، شغّل الأمر التالي في طرفيتك لتنفيذ اختبارك:

node lambdatest_google_test

سيُرسَل الاختبار إلى LambdaTest وسيظهر خرج الاختبار على طرفية LambdaTest، فإذا أردتَ استخراج هذه النتائج لإصدار التقارير من منصة LambdaTest، فيمكنك ذلك باستخدام واجهة برمجة تطبيقات LambdaTest.

إذا ذهبتَ الآن إلى لوحة تحكم أتمتة LambdaTest، فسترى اختبارك موجودًا هناك حيث ستتمكن من مشاهدة مقاطع الفيديو ولقطات الشاشة وغيرها من البيانات.

يمكنك استرداد سجلات الشبكة والأوامر والاستثناءات و Selenium لكل اختبار في عملية بناء اختبارك، وستجد تسجيل فيديو لتنفيذ سكربت Selenium.

ملاحظة: سيوفر زر "المساعدة HELP" الموجود في لوحة تحكم أتمتة LambdaTest كميةً وافرةً من المعلومات لمساعدتك في بدء تشغيل اختبار LambdaTest الآلي.

ملاحظة: إذا لم ترغب في كتابة كائنات الإمكانات لاختباراتك يدويًا، فيمكنك إنشاؤها باستخدام منشئ إمكانات Selenium.

ملء تفاصيل الاختبار على LambdaTest برمجيا

يسهّل تمييز حالة الاختبارات الآلية المتعددة على أنها نجحت أو فشلت الأمورَ كثيرًا عند تنفيذها.

أولًا، استخدِم الأمر التالي لتمييز الحالة على أنها ناجحة في LambdaTest:

driver.executeScript("lambda-status=passed");

ثانيًا، استخدِم الأمر التالي لتمييز الحالة على أنها فاشلة في LambdaTest:

driver.executeScript("lambda-status=failed");

BrowserStack

يُعَدّ إجراء اختبارات Selenium للتشغيل عن بُعد على BrowserStack أمرًا سهلًا، إذ يجب أن تتبع الشيفرة البرمجية التي تحتاجها النمطَ الآتي.

لنكتب إذًا مثالًا يوضّح إجراء اختبارات Selenium للتشغيل عن بُعد على BrowserStack:

أولًا، أنشئ ملفًا جديدًا بالاسم bstack_google_test.js ضمن مجلد المشروع.

ثانيًا، ضع فيه المحتويات التالية:

const webdriver = require('selenium-webdriver');
const By = webdriver.By;
const until = webdriver.until;

// إمكانات الإدخال
let capabilities = {
   'browserName' : 'Firefox',
   'browser_version' : '56.0 beta',
   'os' : 'OS X',
   'os_version' : 'Sierra',
   'resolution' : '1280x1024',
   'browserstack.user' : 'YOUR-USER-NAME',
   'browserstack.key' : 'YOUR-ACCESS-KEY',
   'browserstack.debug' : 'true',
   'build' : 'First build'
};

const driver = new webdriver.Builder()
  .usingServer('http://hub-cloud.browserstack.com/wd/hub')
  .withCapabilities(capabilities)
  .build();

driver.get('http://www.google.com');
driver.findElement(By.name('q')).sendKeys('webdriver');

driver.sleep(1000).then(() => {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

driver.findElement(By.name('btnK')).click();

driver.sleep(2000).then(() => {
  driver.getTitle().then((title) => {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
  });
});

driver.quit();

ثالثًا، انتقل إلى لوحة تحكم أتمتة BrowserStack للحصول اسم مستخدِم ومفتاح الوصول، واستبدل العناصر البديلة YOUR-USER-NAME و YOUR-ACCESS-KEY في شيفرتك باسم المستخدِم وقيم مفتاح الوصول الفعلية وتأكّد من الحفاظ عليها آمنة.

رابعًا، شغّل اختبارك باستخدام الأمر التالي:

node bstack_google_test

سيُرسَل الاختبار إلى BrowserStack وستُعاد نتيجة الاختبار إلى طرفيتك، ويدل ذلك على أهمية تضمين آلية لإعطاء تقارير بالنتائج.

أخيرًا، إذا عدت الآن إلى صفحة لوحة تحكم أتمتة BrowserStack، فسترى اختبارك موجودًا هناك:

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

ملاحظة: يحتوي خيار قائمة الموارد Resources في لوحة تحكم أتمتة Browserstack على مجموعة كبيرة من المعلومات المفيدة حول استخدامه لإجراء الاختبارات الآلية.

ملاحظة: إذا لم ترغب في كتابة كائنات الإمكانات لاختباراتك يدويًا، فيمكنك إنشاؤها باستخدام منشئ إمكانات Selenium.

ملء تفاصيل اختبار BrowserStack برمجيا

يمكنك استخدام واجهة BrowserStack REST API وبعض الإمكانات الأخرى للتعليق على اختبارك بمزيد من التفاصيل مثل إذا نجح الاختبار وسبب نجاحه وما هو المشروع الذي يكون الاختبار جزءًا منه وغير ذلك، إذ لا يعرف BrowserStack هذه التفاصيل افتراضيًا.

لنعدّل bstack_google_test.js لإظهار كيفية عمل هذه الميزات:

يجب أولًا استيراد وحدة طلب Node لنتمكّن من استخدامها لإرسال الطلبات إلى واجهة REST API، لذا أضِف السطر التالي في بداية شيفرتك البرمجية:

const request = require("request");

سنعدّل الآن الكائن capabilities لتضمين اسم المشروع من خلال إضافة السطر التالي قبل قوس الإغلاق المعقوص، ولاتنسى إضافة فاصلة في نهاية السطر السابق، كما يمكنك تغيير أسماء البناء والمشروع لتنظيم الاختبارات في نوافذ مختلفة من لوحة تحكم أتمتة BrowserStack كما يلي:

'project' : 'Google test 2'

يجب بعد ذلك الوصول إلى المعرّف sessionId للجلسة الحالية لنعرف مكان إرسال الطلب، حيث يُضمَّن المعرّف في عنوان URL الخاص بالطلب كما سنرى لاحقًا. ضمّن الأسطر التالية بعد الكتلة التي تنشئ الكائن driver (أي let driver ...‎?

let sessionId;

driver.session_.then((sessionData) =>{
  sessionId = sessionData.id_;
});

أخيرًا، عدّل الكتلة driver.sleep(2000) ...‎ بالقرب من أسفل شيفرتك لإضافة استدعاءات واجهة REST API، ولا تنسى استبدال العناصر البديلة YOUR-USER-NAME و YOUR-ACCESS-KEY في شيفرتك البرمجية باسم المستخدِم وقيم مفتاح الوصول الفعلية:

driver.sleep(2000).then(() => {
  driver.getTitle().then((title) => {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
      request({
         uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`, 
         method:"PUT", 
         form:{"status":"passed","reason":"Google results showed correct title"}}
      );
    } else {
      console.log('Test failed');
      request({
         uri: `https://YOUR-USER-NAME:YOUR-ACCESS-KEY@www.browserstack.com/automate/sessions/${sessionId}.json`, 
         method:"PUT", 
         form:{"status":"failed","reason":"Google results showed wrong title"}}
      );
    }
  });
});

سنرسل استدعاء واجهة API إلى BrowserStack بعد اكتمال الاختبار لتحديثه بحالة النجاح أو الفشل وبسبب النتيجة.

إذا عُدتَ الآن إلى صفحة لوحة تحكم أتمتة BrowserStack، فيجب أن ترى جلسة اختبارك متاحةً كما كانت سابقًا ولكن مع البيانات المحدَّثة المرفقة بها:

Sauce Labs

يُعَدّ إجراء اختبارات Selenium للتشغيل عن بُعد في Sauce Labs أمرًا بسيطًا، ويشبه إلى حد كبير اختبار BrowserStack مع بعض الاختلافات الصياغية، كما يجب أن تتّبع الشيفرة البرمجية التي تحتاجها النمط الآتي.

لنكتب إذًا مثالًا يوضّح إجراء اختبارات Selenium للتشغيل عن بُعد على Sauce Labs:

أولًا، أنشئ ملفًا جديدًا بالاسم sauce_google_test.js ضمن مجلد مشروعك.

ثانيًا، ضع فيه المحتويات التالية:

const webdriver = require('selenium-webdriver');
const By = webdriver.By;
const until = webdriver.until;
const username = "YOUR-USER-NAME";
const accessKey = "YOUR-ACCESS-KEY";

const driver = new webdriver.Builder()
    .withCapabilities({
      'browserName': 'chrome',
      'platform': 'Windows XP',
      'version': '43.0',
      'username': username,
      'accessKey': accessKey
    })
    .usingServer(`https://${username}:${accessKey}@ondemand.saucelabs.com:443/wd/hub`)
    .build();

driver.get('http://www.google.com');

driver.findElement(By.name('q')).sendKeys('webdriver');

driver.sleep(1000).then(() => {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

driver.findElement(By.name('btnK')).click();

driver.sleep(2000).then(() => {
  driver.getTitle().then((title) => {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
  });
});

driver.quit();

ثالثًا، انتقل إلى إعدادات مستخدِم Sauce Labs للحصول اسم المستخدِم ومفتاح الوصول، واستبدل العناصر البديلة YOUR-USER-NAME و YOUR-ACCESS-KEY في شيفرتك باسم المستخدِم وقيم مفتاح الوصول الفعلية وتأكّد من الحفاظ عليها آمنة.

رابعًا، شغّل اختبارك باستخدام الأمر التالي:

node sauce_google_test

سيُرسَل الاختبار إلى Sauce Labs وستُعاد نتيجة الاختبار إلى طرفيتك، إذ يدل ذلك على أهمية تضمين آلية لإعطاء تقارير بالنتائج.

أخيرًا، إذا انتقلت الآن إلى صفحة لوحة تحكم أتمتة Sauce Labs، فسترى اختبارك موجودًا هناك حيث ستتمكّن من مشاهدة مقاطع الفيديو ولقطات الشاشة وغيرها من البيانات.

ملاحظة: تُعَدّ أداة إعداد منصة Sauce Labs أداةً مفيدةً لإنشاء كائنات الإمكانات لتقديمها إلى نسخ المشغّلات بناءً على المتصفح/نظام التشغيل الذي تريد الاختبار عليه.

ملء تفاصيل اختبار Sauce Labs برمجيا

يمكنك استخدام Sauce Labs API للتعليق على اختبارك بمزيد من التفاصيل مثل نجاح الاختبار واسم الاختبار وغير ذلك، إذ لا يعرف Sauce Labs هذه التفاصيل افتراضيًا.

يمكن تطبيق ذلك كما يلي:

أولًا، ثبّت المغلّف Node Sauce Labs باستخدام الأمر التالي (إذا لم تفعل ذلك مسبقًا في هذا المشروع):

npm install saucelabs --save-dev

ثانيًا، اطلب saucelabs في أعلى الملف sauce_google_test.js بعد التصريح عن المتغيرات:

const SauceLabs = require('saucelabs');

ثالثًا، أنشئ نسخةً جديدةً من SauceLabs من خلال إضافة ما يلي:

let saucelabs = new SauceLabs({
    username : "YOUR-USER-NAME",
    password : "YOUR-ACCESS-KEY"
});

لا تنسى استبدال العناصر البديلة YOUR-USER-NAME و YOUR-ACCESS-KEY في شيفرتك باسم المستخدِم وقيم مفتاح الوصول الفعلية، ولاحظ أنّ حزمة saucelabs npm تستخدِم كلمة المرور password وليس مفتاح الوصول accessKey، وبما أنك تستخدِم هاتين القيمتين، فيمكن أن ترغب في إنشاء متغيرين مساعدَين لتخزينهما فيهما.

رابعًا، أضِف الكتلة التالية بعد كتلة تعريف المتغير driver بعد سطر build()‎ مباشرةً، حيث تحصل هذه الكتلة على معرّف جلسة sessionID المشغّل الصحيح الذي نحتاجه لكتابة البيانات في الوظيفة، حيث يمكنك رؤية هذا المعرّف قيد التشغيل في كتلة الشيفرة البرمجية التالية:

driver.getSession().then((sessionid) => {
      driver.sessionID = sessionid.id_;
});

أخيرًا، استبدل الكتلة driver.sleep(2000) ...‎ الموجودة في أسفل الشيفرة البرمجية بما يلي:

driver.sleep(2000).then(() => {.then(function() {
  driver.getTitle().then((title) => {
    let testPassed = false;
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
      let testPassed = true;
    } else {
      console.log('Test failed');
    }

    saucelabs.updateJob(driver.sessionID, {
      name: 'Google search results page title test',
      passed: testPassed
    });
  });
});

ضبطنا هنا المتغير testPassed على القيمة true أو false اعتمادًا على نجاح الاختبار أو فشله، ثم استخدمنا التابع saucelabs.updateJob()‎ لتحديث التفاصيل.

إذا عُدتَ الآن إلى صفحة لوحة تحكم أتمتة Sauce Labs، فسترى أن وظيفتك الجديدة تحتوي الآن على البيانات المُحدَّثة المرفقة بها:

خادمك البعيد

إذا لم ترغب في استخدام خدمة مثل Sauce Labs أو BrowserStack، فيمكنك دائمًا إعداد خادمك للاختبار عن بُعد كما يلي:

أولًا، يتطلب خادم Selenium البعيد تشغيل شيفرة جافا، لذا يجب عليك تنزيل أحدث إصدار من JDK لمنصتك من صفحة تنزيلات Java SE، ثم ثبّته بعد تنزيله.

ثانيًا، نزّل خادم Selenium المستقل الأحدث الذي يعمل بوصفه وكيلًا proxy بين السكربت ومشغّلات المتصفح، ثم اختر أحدث رقم إصدار مستقر -أي ليس إصدارًا تجريبيًا beta- واختر من القائمة ملفًا يبدأ بعبارة "selenium-server-standalone"، ثم ضعه في مكان يمكنك الوصول إليه بسهولة بعد تنزيله مثل مجلدك الرئيسي، كما يجب إضافة الموقع إلى المتغير PATH إذا لم تفعل ذلك بعد.

ثالثًا، شغّل الخادم المستقل من خلال إدخال ما يلي في طرفية حاسوب خادمك:

java -jar selenium-server-standalone-3.0.0.jar

عدّل اسم الملف ‎.jar بحيث يتطابق تمامًا مع ملفك.

رابعًا، سيعمل الخادم على http://localhost:4444/wd/hub، لذا انتقل إلى هناك الآن لترى ما ستحصل عليه.

لدينا الآن الخادم قيد التشغيل، فلننشئ اختبارًا تجريبيًا يعمل على خادم Selenium البعيد:

1. أنشئ نسخةً من الملف google_test.js بالاسم google_test_remote.js وضعه في مجلد مشروعك.
2. عدّل كتلة الشيفرة البرمجية الثانية التي تبدأ بالسطر let driver = ...‎ كما يلي:

let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .usingServer('http://localhost:4444/wd/hub')
    .build();

3. شغّل اختبارك وسترى أنه يعمل بالشكل المتوقع، ولكنه سيعمل هذه المرة على الخادم المستقل:

node google_test_remote.js

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

دمج Selenium مع أدوات CI

يمكن دمج Selenium والأدوات المتعلقة به مثل LambdaTest و Sauce Labs مع أدوات التكامل المستمر Continuous Integration أو CI اختصارًا، إذ يُعَدّ ذلك مفيدًا لأنه يعني أنه يمكنك إجراء اختباراتك عبر أداة CI وإجراء تغييرات جديدة في مستودع شيفرتك البرمجية فقط إذا نجحت الاختبارات.

نقترح عليك البدء باستخدام أداة Travis CI التي تُعَدّ أسهل أداة CI للبدء بها ولديها تكامل جيد مع أدوات الويب مثل GitHub و Node.

ملاحظة: إذا أردتَ إجراء اختبار مستمر باستخدام اختبار آلي بدون شيفرة برمجية، فيمكنك استخدام أداة Endtest أو TestingBot.

يجب أن يمنحك هذا المقال نظرةً كافيةً لكتابة وتشغيل الاختبارات الآلية لتبدأ في كتابة اختباراتك الآلية الخاصة.

ترجمة -وبتصرُّف- للمقال Setting up your own test automation environment.

اقرأ أيضًا

• المقال السابق: مدخل إلى اختبارات مشاريع الويب الآلية للتوافق مع المتصفحات
• مدخل إلى اختبار مشاريع الويب للتوافق مع المتصفحات
• استراتيجيات اختبارات مشاريع الويب للتوافق مع المتصفحات
• معالجة المشاكل الشائعة للتوافق مع المتصفحات في شيفرة جافاسكربت

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

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

ما هي تطبيقات سطح المكتب؟

تطبيقات سطح المكتب هي تطبيقات مستقلة بذاتها مصممة للعمل على أجهزة الحاسوب المكتبية والحواسيب المحمولة التي تعمل عادة بأنظمة تشغيل ويندوز أو لينكس أو ماك.

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

يمكن لتطبيقات سطح المكتب أداء مهام متنوعة مثل تحرير الصور أو معالجة النصوص أو تشغيل الوسائط أو اللعب ومن أشهر الأمثلة على تطبيقات سطح المكتب مستكشف ملفات ويندوز وتطبيقات مايكروسوفت أوفيس وتطبيقات تصفح الإنترنت مثل متصفح كروم ومتصفح فايرفوكس وتطبيقات تحرير الصور مثل أدوبي فوتوشوب وتطبيقات تشغيل الوسائط مثل Windows Media Player ومشغل الفيديو والوسائط VLC …إلخ.

أهمية تطبيقات سطح المكتب

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

وهناك العديد من المجالات التي يفضل المستخدمون فيها تطبيقات سطح المكتب المحلية على أنواع التطبيقات الأخرى ومن أهمها:

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

تعد تطبيقات سطح المكتب أكثر أمانًا وسرية كما أنها تتواصل مع الحاسوب وعتاده مباشرةً دون وسيط أي أنها تتخاطب بالطبع مع نظام التشغيل الذي يُشغِّل عتاد الحاسوب وهذا يمنع أي تأخير في التواصل على عكس تطبيقات الويب مثلًا التي تعمل ضمن المتصفح وهو في الأساس تطبيق سطح مكتب يتواصل بدوره مع نظام التشغيل ثم مع العتاد.

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

أنواع تطبيقات سطح المكتب

كما شرحنا سابقًا فإن تطبيقات سطح المكتب بالأساس هي تطبيقات مستقلة بذاتها ويمكنها العمل على على أجهزة حاسوب محلية تعلم بأنظمة تشغيل معينة، وفي هذه الفقرة سنوضح الفرق بين نوعين من تطبيقات سطح المكتب.

1. تطبيقات سطح المكتب الأصيلة Native Desktop Application
2. تطبيقات سطح المكتب متعددة المنصات Cross-platform Desktop Application

وإليك الفرق بين هذين النوعين ومميزاتهما وطريقة برمجة تطبيقات سطح المكتب لكل منهما.

1. تطبيقات سطح المكتب الأصيلة Native Desktop Application

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

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

يمكن أن تتطلب تطبيقات سطح المكتب الأصيلة كذلك توافر خصائص معينة في الجهاز أو وجود إصدارات معينة لأنظمة التشغيل يحددها المطورون عند برمجة تطبيقات سطح المكتب كي تعمل بشكل صحيح. على سبيل المثال تتطلب أحدث نسخة من تطبيق تحرير الفيديو الاحترافي أدوبي بريمر برو احتواء جهاز الحاسوب على ذاكرة وصول عشوائي RAM بسعة 8 جيجابايت على الأقل ووحدة معالجة رسومات GPU بسعة 2 جيجابايت ومعالج جيل سادس والإصدار ويندوز 10 بمعمارية 64 بت.

تعتمد برمجة تطبيقات سطح المكتب المحلية بشكل أساسي على لغات برمجة عالية المستوى مثل جافا وبايثون وروبي و C‎++‎ و C#‎ لكن أبرز عيوب تطوير التطبيقات المحلية هو أنك ستحتاج لكتابة شيفرات برمجية منفصلة لتطوير تطبيقات سطح المكتب مخصصة لكل نظام تشغيل.

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

2. تطبيقات سطح المكتب متعددة المنصات Cross-platform Desktop Application

تطبيقات سطح المكتب متعددة المنصات أو التطبيقات العابرة للأنظمة هي تطبيقات تُبرمَج مرة واحدة وتعمل على كافة أنظمة التشغيل خلافًا تطبيقات سطح المكتب الأصيلة المبرمجة للعمل على نظام أساسي واحد فقط، ويعمل هذا النوع من التطبيقات بكفاءة على الحواسيب الشخصية والمحمولة والأجهزة اللوحية على حد سواء حيث يُكتب الكود البرمجي لتطبيق سطح المكتب متعدد الأنظمة مرة واحدة فقط ويكون قادرًا على العمل على أنظمة التشغيل المختلفة.

وميزة الشيفرة الواحدة التي تعمل على مختلف أنظمة التشغيل تأتي مع قيود تكثر أو تقل بحسب كيفية برمجتها والأدوات المستخدمة في برمجتها وتتصف أحيانًا بأداء أقل من التطبيقات الأصيلة ووصول أقل أو محدود إلى موارد الحاسوب مثل الكاميرا أو ماسح البصمة وقد تكون أقل أمانًا أيضًا لذا لن تجد مثلًا أي لعبة -وهي نوع من أنواع تطبيقات سطح المكتب- تستهلك موارد الحاسوب استهلاكًا كاملًا تُبرمَج بهذه الطريقة ولا التطبيقات ذات الأمان المرتفع مثل تطبيقات البنوك أو التطبيقات الحكومية وهكذا.

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

وتلجأ معظم الشركات اليوم للاستفادة من مميزات هذا النوع من التطبيقات لأنها أقل كلفة في التطوير والصيانة ولا تحتاج أغلبها إلى أداء مرتفع ووصول إلى كامل عتاد الحاسوب ومن أبرز الأمثلة على تطبيقات تم إنشاؤها باستخدام هذه التقنية نذكر تطبيق ووردبريس لسطح المكتب WordPress Desktop app الذي يمكنك من إدارة موقع ووردبريس الخاص بك مثل إضافة المنشورات وتحديث الإضافات والرد على التعليقات من حاسوبك المحلي دون فتح متصفحك، وتطبيق سلاك Slack لسطح المكتب وتطبيق واتساب الشهير لسطح المكتب …إلخ.

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

الفرق بين تطبيقات الويب وتطبيقات سطح المكتب

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

بينما تطبيق الويب هو برنامج يتم توفيره على متصفح الويب وهو في الأساس تطبيق سطح مكتب -أو تطبيق جوال- عن طريق الاتصال بالإنترنت وطلب ملفاته من خادم بعيد، ولا يتطلب تشغيل هذا التطبيق توفر أي موارد أو متطلبات في جهازك أو نظام التشغيل الذي تستخدمه فكل ما تحتاجه لتشغيل تطبيق الويب هو مستعرض واتصال بالإنترنت وبكتابة عنوان URL الخاص بالتطبيق ضمن نافذة المتصفح ستتمكن من الولوج له وبدء استخدامه والاستفادة من مميزاته.

تعتمد برمجة تطبيقات الويب على تقنيات الويب التي ذكرناها آنفًا في تطوير تطبيقات سطح المكتب متعددة الأنظمة بالإضافة إلى لغات وتقنيات برمجة الويب المختلفة مثل لغة PHP ولغة Ruby وحتى لغة بايثون Python وسنتحدث بمزيد من التفصيل عن تقنيات ولغات برمجة تطبيقات سطح المكتب في الفقرة التالية.

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

تقنيات ولغات برمجة تطبيقات سطح المكتب

قد تتساءل ما هي أفضل لغات البرمجة لبرمجة تطبيقات سطح المكتب؟ في هذه الفقرة نوفر لك قائمة بأهم هذه التقنيات ومميزات كل منها.

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

لغات برمجة تطبيقات ويندوز

فإذا أردت برمجة تطبيقات أصيلة مخصصة للعمل على نظام التشغيل ويندوز فعليك استخدام لغات برمجة مثل C#‎ و C++‎.

لغات برمجة تطبيقات ماك macOS

وأما لبرمجة تطبيقات خاصة بنظام التشغيل ماك أو إس فعليك استخدام لغة Objective C.

لغات برمجة تطبيقات لينكس

وأما لتطوير تطبيقات سطح مكتب موجهة لنظام التشغيل لينكس فيمكنك استخدام لغة C أو لغة C++‎ أو لغة Bash.

كما أنك تحتاج للاستعانة بأدوات خاصة ومكتبات رسم الواجهات وحزم أدوات تطوير البرمجيات SDKs متوفرة لكل نظام تشغيل على حدة.

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

وعمومًا، يمكنك تطوير تطبيقات سطح المكتب بالاعتماد على إحدى لغات البرمجة سواءً أصيلة أو عابرة للمنصات فقط لكن هذا قد يتطلب منك الكثير من الوقت والجهد لذا يفضل الاعتماد على إطار عمل framework مساعد تقلل التعليمات البرمجية وتوفر عليك الوقت وتساعد في زيادة إنتاجيتك.

أدوات وأطر عمل لبرمجة تطبيقات سطح المكتب

فيما يلي قائمة بأشهر أدوات وأطر عمل تطوير تطبيقات سطح المكتب:

إلكترون Electron js

هو إطار عمل برمجي يستخدم في برمجة تطبيقات سطح مكتب عابرة للمنصات تبدو وكأنها تطبيقات أصيلة native-feeling لكنها تعتمد بالأصل على تقنيات الويب الأساسية HTML و CSS وجافا سكريبت وتستخدم متصفح الويب مفتوح المصدر كروميوم Chromium لعرض محتوى التطبيق كما أنها تستخدم بيئة التشغيل Node.js للوصول إلى نظام الملفات المحلي ونظام التشغيل وبهذا يمكن للتطبيقات العمل على أي نظام تشغيل بكل سلاسة.

ومن أشهر تطبيقات سطح المكتب المطورة باستخدام إطار عمل إلكترون نذكر تطبيق سلاك Slack وتطبيق واتساب WhatsApp ومحرر الأكواد الشهير فيجوال ستوديو كود Visual Studio Code.

إذا كنت مهتمًا بتطوير تطبيقات سطح المكتب باستخدام إطار عمل إلكترون فقد وفرت لك أكاديمية حسوب مسارًا متكاملًا ضمن دورة تطوير التطبيقات باستخدام JavaScript ستتعلم من خلاله إنشاء تطبيق Electron JS لسطح المكتب.

كاكاو Cocoa

هو إطار عمل مخصص لتطوير تطبيقات سطح المكتب التي تعمل على نظام تشغيل macOS ويمكن استخدامه كذلك لإنشاء تطبيقات مخصصة للأجهزة المحمولة، يوفر هذا الإطار العديد من عناصر واجهة المستخدم التي تتيح لك إنشاء واجهات مستخدم احترافية كالحقول النصية وأشرطة التنقل وأزرار الاختيار كما يساعدك على تحسين أداء تطبيقاتك من خلال توفير ميزات إدارة الذاكرة والتحميل الكسول Lazy loading.

إطار العمل WPF

هي اختصار لعبارة Windows Presentation Foundation وهو إطار عمل يتيح لك إنشاء واجهة مستخدم لتطبيقات ويندوز باستخدام لغة XAML متوافق مع إطار عمل ‎.NET ويحتوي مكتبات وأدوات لبرمجة الألعاب والويب وتطبيقات الهاتف المحمول ويساعدك في تضمين العديد من الميزات في تطبيقاتك مثل التخطيطات المتجاوبة مع كافة أحجام الشاشات وعناصر التحكم والنماذج وغيرها من الأدوات التي تجعل تجربة برمجة التطبيقات احترافية وسريعة.

منصة UWP

هي اختصار لعبارة Universal Windows Platform وهي منصة متخصصة في برمجة تطبيقات سطح المكتب متوافقة مع نظام التشغيل ويندوز 10 وويندوز 11 وتتميز التطبيقات المطورة بهذه المنصة بكونها متوافقة مع كافة أحجام الشاشات وقادرة على التحكم بالموارد المختلفة للجهاز كالفأرة ولوحة المفاتيح وكاميرا الويب وأجهزة التحكم في الألعاب وشاشات اللمس.

إطار العمل WinForms

هو إطار عمل مخصص لبناء واجهات المستخدم لتطبيقات سطح المكتب التي تعمل على نظام التشغيل ويندوز بسهولة من خلال تقنية السحب والإفلات التي تساعد مطوري البرامج على برمجة التطبيقات بسرعة وكفاءة، كما يسمح WinForms للمطورين باسترداد البيانات من واجهة برمجة التطبيقات API أو ملفات JSON أو XML أو غيرها من مصادر البيانات وعرضها ضمن التطبيقات.

خطوات تعلم برمجة تطبيقات سطح المكتب

إن كنت مهتمًا ببرمجة تطبيقات سطح المكتب ومتحمسًا جدًا لتعلمها لكنك لا تعلم من أين تبدأ، حسنًا دعنا نستعرض مجموعة من الخطوات التي تساعدك في تعلم تطوير تطبيقات سطح المكتب من الصفر للاحتراف.

1. حدد هدفك

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

2. حدد لغة البرمجة

حدد لغة البرمجة الأنسب التي تمكنك من برمجة تطبيقات سطح المكتب المخصصة للمنصة التي اخترتها وضع خطة لتعلمها والتزم بها قدر المستطاع.

3. حدد الأدوات وأطر العمل

تعلم استعمال إطار العمل المناسب للغة البرمجة أو المنصة التي اخترتها فهي تسرع عملك وتمكنك من تطوير تطبيق سطح مكتب عالي الجودة على سبيل المثال يمكنك استخدام إطار عمل إلكترون مع لغة جافاسكربت لبرمجة تطبيقات سطح مكتب عابرة للمنصات، واستخدام إطار عمل Cocoa لإنشاء تطبيقات خاصة بنظام التشغيل macOS.

4. طبق ما تعلمته

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

5. حضر التصميمات الأولية لواجهة التطبيق

قبل البدء بالتنفيذ من المهم تصميم نماذج أولية لواجهات التطبيق فهي تساعدك على توسيع أفكارك وتحديد طريقة عمل التطبيق بشكل أفضل، ويمكنك في هذه المرحلة أن ترسم نماذج تطبيقك بشكل بدائي على الورق أو تعتمد أدوات احترافية مثل Adobe XD أو أو Mockplus أو Moqups وأيًا كانت الطريقة المتبعة في التصميم احرص على أن تراعي تجربة المستخدم وسهولة الاستخدام، وإن كنت تعمل مع فريق، فهذه العملية سيستلمها فريق التصميم عادةً.

وللمزيد من التفاصيل، اطلع على مقال تصميم النماذج الأولية للواجهات الرسومية ومقال المرحلة الرابعة في عملية التفكير التصميمي: مرحلة بناء النماذج الأولية.

6. ابدأ عملية البرمجة

بعدها ابدأ في برمجة تطبيق سطح المكتب مستعينًا بالأدوات التي تعلمتها، وفي هذه المرحلة ليس عليك تحقيق جميع الميزات في وقت واحد بل نفذها واحدة تلو الأخرى.

7. احترف حل المشكلات

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

للاستزادة، ارجع إلى مقال حل المشكلات وأهميتها في احتراف البرمجة.

8. اختبر التطبيق

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

9. انشر التطبيق

بعد التأكد من أن تطبيقك يعمل على ما يرام يمكنك البدء في إصدار ونشر تطبيق سطح المكتب الخاص بك على المستخدمين، وبمجرد أن يصبح جاهزًا للعمل يمكنك إنشاء حساب مطور ورفعه على أحد المتاجر المتخصصة مثل متجر مايكروسوفت لتطبيقات ويندوز Windows ومتجر Apple لمستخدمي ماك أو يمكنك تحميله في GitHub أو في موقع الويب الخاص بك لبناء معرض أعمال خاص بك يساعدك في دخول سوق العمل بسرعة أكبر.

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

10. استمر في التعلم

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

وأنصحك بقراءة مقال كيف تتعلم البرمجة: نصائح وأدوات لرحلتك في عالم البرمجة لبعض النصائح في هذه الرحلة، رحلة تعلم البرمجة وبرمجة تطبيقات سطح المكتب.

الخلاصة

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

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

اقرأ أيضًا

• برمجة تطبيقات الجوال
• تطوير التطبيقات

مصطلح إطار العمل أو الفريم وورك Framework يعد أحد المصطلحات الفنية والبرمجية التي تربك المبتدئين على وجه الخصوص في بداية مشوار تعلم البرمجة والتي لا يستطيع فهم دلالتها ولا إدراك مدى أهميتها بشكل جيد.

وكثيرًا ما يتساءل المبرمج المبتدئ عن معنى إطار العمل Framework وعن مزايا ومحدويات استخدام أطر العمل Frameworks في عمله البرمجي وعملية البرمجة عمومًا، وهل يتوجب عليه تعلم إطار عمل للغة برمجة محددة، أم أن تعلمه للغة البرمجة نفسها يكفيه في سوق العمل، وهل تعلم إطار العمل صعب ويستغرق وقتًا، ومالفرق بين إطار العمل والمكتبة، وغيرها من الأسئلة من هذا القبيل. فإذا كنت مهتمًا بعرفة الإجابة على كل هذه التساؤلات فتابع قراءة هذا المقال للنهاية.

ما هو إطار العمل Framework؟

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

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

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

ستجد الكثير من أطر عمل لكل لغات البرمجة الشائعة مثل جافاسكريبت وبايثون و PHP وجافا، ومن أجل استخدام أي إطار منها عليك بداية تعلم كيفية تطوير المشاريع في كل إطار منها والاستفادة من التسهيلات الكثيرة التي توفرها لك هذه الأطر.

ما الفرق بين إطار العمل والمكتبة؟

كثيرًا ما يتم الخلط بين مفهوم إطار العمل Framework ومفهوم مشابه له في البرمجة وهو المكتبة Library ورغم التشابه بينهما في طريقة العمل واستخدامهما بالتبادل في بعض الأحيان، إلا أن مفهوم المكتبة أبسط وأكثر محدودية فالمكتبة تركز على توفير وظيفة محددة في حين يوفر إطار العمل مجموعة متكاملة من الميزات التي تمكنك من برمجة تطبيقات في مجال محدد.

تُعرَّف المكتبة بأنها عبارة عن مجموعة من التعليمات البرمجية المختبرة القابلة لإعادة الاستخدام والتي تنفذ وظيفة معينة وتحل مشكلة محددة، في حين ينفذ إطار العمل حزمة وظائف متكاملة أو يوفر مخططًا عامًا لبناء التطبيقات في حين لا توفر المكتبات هذه الميزة كما تحدد أطر العمل قواعد وإرشادات كتابة التعليمات البرمجية الخاصة بك وتنظم الملفات والمجلدات الخاصة بمشاريعك، ويمكن أن تتضمن مجموعة من المكتبات وتستخدمها لتنفذ مهام معينة.

على سبيل المثال من بين المكتبات الشائعة نذكر مكتبة ريآكت React وهي مكتبة برمجية مبنية بلغة جافاسكربت ومتخصصة في بناء واجهات المستخدم ومكتبة jQuery التي تختصر العديد من الأكواد والتعليمات البرمجية المكررة في جافا سكريبت لتسهيل عملية البرمجة، ومن بين أطر العمل الشائعة نذكر أنجولار Angular وفيو Vue.js وهما إطارا عمل بلغة جافا سكريبت مختصان في تصميم واجهات مواقع الويب.

ما الفرق بين إطار العمل ولغة البرمجة؟

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

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

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

أهمية إطار العمل في البرمجة

تبرز أهمية إطار العمل framework بشكل أساسي في كونه يتيح لك إعادة استخدام التعليمات البرمجية بدلًا من إعادة كتابتها من جديد، وفيما يلي جملة من الفوائد التي يمكن أن يوفرها استخدام إطار العمل:

• يساعد على توفير كود أكثر أمانًا لكونه يتضمن شيفرات تتحقق من المصادقات والصلاحيات وتحمي تطبيقك من الاختراق وتعالج الكثير من الثغرات الأمنية الشائعة مثل CSRF و XSS و SQL Injection.
• تركيز الجهود على كتابة التعليمات البرمجية الخاصة بالمشروع فقط بدلًا من برمجة وظائف متكررة وشائعة الاستخدام.
• توحد أنماط وقواعد كتابة التعليمات البرمجية وتوفر مخططًا عامًّا يمكن لكافة الفرق البرمجية فهمه بسهولة.
• يساعد في تطوير مشروعك وإضافة ميزات جديدة له بسهولة دون الحاجة للتعديل على الكود الأساسي لإطار العمل.
• يغني عن إعادة اختراع العجلة ويوفر لك الوقت والتكلفة اللازمين لتطوير المشاريع والتطبيقات.
• يساعد في كتابة كود نظيف وغير مكرر.
• يسهل عملية اختبار الكود وتصحيح الأخطاء البرمجية.
• يقلل بالعموم من كمية الأخطاء البرمجية لأنك ستكتب كود أقل وبالتالي ستنتج لديك أخطاء برمجية أقل.

محدوديات إطار العمل

لا شكَّ أن استخدام إطار العمل يفيدك كمطور ويساعدك على تسريع وتحسين العمل البرمجي، إلا أن الاعتماد على أطر العمل وحدها يفرض عليك بعض القيود وإليك أبرزها:

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

صفات إطار العمل الجيد

تتوافر عشرات أطر العمل في المجالات البرمجية المختلفة الأمر الذي يشعرك بالحيرة في تحديد الإطار الأفضل لمشروعك ويجعلك تتساءل كيف أختار إطار العمل المناسب؟

بالعموم يتصف إطار العمل الجيد بثلاث صفات أساسية وهي:

1. التوثيق الجيد
2. توفير الوظائف المطلوبة لعملك
3. الشهرة والدعم المجتمعي

لنوضح بمزيد من التفصيل كل صفة من هذه الصفات وأهميتها في اختيار إطار العمل الأفضل.

التوثيق الجيد

اختر إطار عمل موثقًا بشكل جيدًا كي تتمكن من العودة إليه عندما تحتاج لمعرفة المزيد من المعلومات حول استخدام ميزة معينة أو حل مشكلة تواجهك في استخدامه، فالتوثيق الجيد يوفر عليك الكثير من الوقت والجهد.

توفير الوظائف المطلوبة لعملك

ضع في اعتبارك أن لكل إطار عمل حدود معينة لذا من الضروري أن تبحث بشكل جيد في ميزات الإطار الذي تريد اعتماده وتتأكد من أنه يلبي متطلبات مشروعك ويحقق لك كافة الوظائف والميزات التي تحتاج لتحقيقها بالشكل الأنسب، وبنفس الوقت لا تختر إطار عمل شديد التعقيد أو مكتظًا بالميزات التي قد لا تحتاجها على الإطلاق!

الشهرة والدعم المجتمعي

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

ولذلك السبب ترى البعض يميل إلى استخدام إطار العمل Vue.js الذي انبثق من أروقة المجتمع الحر بدلًا من إطار العمل Angular الذي ولد بين أروقة شركة غوغل مثلًا، ولكن هنالك طرف مقابل يشير إلى تنظيم وقوة وسرعة تطوير أطر العمل التي تقف خلفهم الشركات نظرًا لدعمهم السخي طويل الآجل عادةً خصوصًا إن وقفت شركات تقنية كبيرة خلفهم والحديث يطول في هذه النقطة وهي خارج موضوع المقال فقط أحببت الإشارة إليها نظرًا لأهميتها في أي نقاش يدور حول المفاضلة بينها.

أنواع أطر العمل frameworks في البرمجة

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

1. أطر عمل تطوير الويب Web development frameworks

تستخدم هذه الأطر في تطوير تطبيقات الويب ومن أشهرها إطار عمل أنجولار Angular وفيو جي إس Vue.js وهي أطر عمل جافا سكريبت شائعة تستخدم لتطوير الواجهات الأمامية للويب، وإطاري عمل إكسبرس Express  و NestJS وهي أطر عمل Node.js لتطوير الواجهات الخلفية للويب، وإطاري عمل جانغو Django  وفلاسك Flask وهي أطر عمل مفتوحة المصدر مكتوب بلغة بايثون مخصصة لتطوير الواجهات الخلفية للويب، وإطار عمل Ruby on Rails الذي يوفر لك كل ما تحتاجه لإنشاء تطبيق ويب بسهولة وسرعة وأمان وإطار عمل لارافيل Laravel المبني بالاعتماد على لغة PHP.

2. أطر عمل تطوير الجوال Mobile development frameworks

من أشهرها في تطوير تطبيقات الجوال نذكر إطار عمل React Native مفتوح المصدر مكتوب بلغة جافا سكريبت طورته فيسبوك لتطوير تطبيقات جوال متوافقة مع كافة الأنظمة الأساسية، وإطار أيونيك Ionic الذي يستخدم تقنيات الويب HTML و CSS وجافا سكريبت من أجل تطوير تطبيقات الجوال وهو يتكامل مع أطر تطوير الواجهات الأمامية مثل Angular و Vue، وإطار عمل فلاتر Flutter وهو إطار عمل مفتوح المصدر للغة دارت Dart من جوجل لتطوير تطبيقات الجوال وهو يدعم أنظمة iOS و Android ويحتوي على عناصر واجهة مستخدم قابلة للتخصيص بالكامل، وإطار عمل أباتشي كوردوفا Apache Cordova الذي يمكنك من تطوير تطبيقات هجينة للهاتف الجوال.

3. أطر عمل علم البيانات Data science frameworks

تعرف هذه الأطر كذلك بأطر التعلم الآلي Machine Learning Frameworks وهي تساعد علماء البيانات على إنشاء نماذج تعلم آلي وتصميمها بشكل أسرع وأسهل واستخراج المعلومات المفيدة من مجموعات البيانات بالاستفادة من تقنيات البرمجة والذكاء الاصطناعي والتعلم الآلي. وهناك العديد من أطر عمل علم البيانات ومن ضمنها scikit-Learn و XGBoost و TensorFlow و PyTorch.

4. أطر إدارة المحتوى Content management frameworks

تعرف أيضًا باسم نظم إدارة المحتوى Content Management Systems أو اختصارًا CMS هي برمجيات توفر مكونات قابلة لإعادة الاستخدام لإنشاء وإدارة محتوى الويب وعرضه ضمن مدونات أو مواقع إلكترونية أو تطبيقات جوال وهي توفر ميزات أخرى مثل سهولة الاستخدام وتحسين محركات البحث والأمان.

ومن أشهر هذه النظم نذكر نظام ووردبريس WordPress الشهير المستخدم في إنشاء ما يقارب من نصف المواقع الإلكتروني ودروبال Drupal الذي يعد نظام مثالي لتطوير المواقع التي تحتوي على الكثير من المحتوى وهو يتطلب معرفة تقنية أكثر من بقية نظم إدارة المحتوى.

5. أطر عمل أتمتة الاختبار Test Automation frameworks

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

من أشهر أطر الاختبار نذكر سيلينيوم Selenium وهو إطار مفتوح المصدر لأتمتة اختبار تطبيقات الويب، وCypress المبني بجافا سكريبت والمخصص لاختبار الواجهة الأمامية لتطبيقات الويب، و Playwright للاختبار الشامل لتطبيقات الويب.

هل يمكن البدء باستخدام إطار العمل دون تعلم لغة البرمجة؟

لاشك أن إطار العمل يوفر لك كمطور أداة قيمة لتطوير البرامج التطبيقات المختلفة، لكن السؤال الذي يطرح نفسه هل يغني تعلم أطر العمل واستخدامها في بناء التطبيقات العملية عن تعلم لغات البرمجة وفهمها بشكل متعمق؟

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

كما أن تعلّم البرمجة يوسع أفق عملك ويمكنك من بناء العديد من التطبيقات في مختلف المجالات، أما إطار العمل فهو مصمم كما ذكرنا سابقًا لغرض واحد فقط وبالتالي سيقيدك بنوع محدد من التطبيقات.

ويمكن باختصار أن نلخص الإجابة على هذا السؤال بجملة واحدة: يمكنك استخدام أطر العمل، لكن قبل ذلك تعلم أساسيات لغة البرمجة واتقنها ثم استفد من ميزات إطار العمل الخاص بتلك اللغة كما يحلو لك.

الخلاصة

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

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

اقرأ أيضًا

• تعلم أساسيات البرمجة
• قواعد البرمجة ببساطة للمبتدئين
• أسهل لغات البرمجة
• مهندس البرمجيات من هو وما هي مهامه
• تعرف على تخصص هندسة البرمجيات

يمكن أن يصبح إجراء الاختبارات يدويًا على العديد من المتصفحات والأجهزة عدة مرات في اليوم أمرًا مملًا ويمكن أن يستغرق وقتًا طويلًا، لذا يجب أن تكون على دراية بأدوات الاختبار الآلية Automation، وسنلقي في هذا المقال نظرةً على الأدوات المتاحة وكيفية استخدام مشغّلات المهام وكيفية استخدام أساسيات تطبيقات اختبار المتصفح التجارية الآلية مثل LambdaTest و Sauce Labs و BrowserStack و TestingBot.

• المتطلبات الأساسية: يجب أن تتعلم أساسيات لغات HTML و CSS وجافاسكربت JavaScript، وأن يكون لديك فكرة عن المبادئ عالية المستوى لاختبار التوافق مع المتصفحات.
• الهدف: فهم ما يتطلبه الاختبار الآلي، وكيفية الاستفادة من بعض المنتجات التجارية لتسهيل الأمور.

تسهيل الأمور باستخدام الاختبارات الآلية

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

يمكن أن يكون اختبار جميع الأشياء التي اطلعنا عليها في المقالات السابقة يدويًا أمرًا صعبًا للغاية، ولكن لحسن الحظ هناك أدوات تساعدنا على التخلص من ذلك تلقائيًا، فهناك طريقتان رئيسيتان يمكننا من خلالهما أتمتة هذه الاختبارات وهما:

1. استخدِم مشغّلات المهام Task Runner مثل Grunt أو Gulp أو سكربتات npm لتشغيل الاختبارات وتنظيف الشيفرة البرمجية أثناء عملية البناء، فهذه طريقة رائعة لإجراء مهام مثل تنقيح صياغة Linting الشيفرة البرمجية وتصغيرها وإضافة بادئات CSS أو تحويل Transpiling ميزات جافاسكربت المُنشَاة للوصول إلى أقصى حد من التوافق مع المتصفحات وما إلى ذلك.
2. استخدِم نظام أتمتة للمتصفح مثل Selenium لإجراء اختبارات محددة على المتصفحات المُثبَّتة وإعادة النتائج لإعطائك تنبيهات بأخطاء المتصفحات عند ظهورها. تعتمد تطبيقات الاختبار التجارية للتوافق مع المتصفحات مثل LambdaTest و Sauce Labs و BrowserStack و TestingBot على نظام Selenium، ولكنها تتيح لك الوصول إلى إعدادها عن بُعد باستخدام واجهة بسيطة، مما يوفر لك متاعب إعداد نظام الاختبار.

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

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

استخدام مشغل المهام لجعل أدوات الاختبار آلية

يمكنك تسريع المهام الشائعة بصورة كبيرة مثل تنقيح صياغة الشيفرة البرمجية وتصغيرها باستخدام مشغّل المهام لتشغيل كل ما تحتاجه تشغيلًا تلقائيًا في مرحلة معينة من عملية البناء، إذ يمكن أن يحدث ذلك مثلًا في كل مرة تحفظ فيها ملفًا أو في أيّ وقت آخر، كما سننظر في كيفية جعل تشغيل المهام آلية باستخدام Node و Gulp، وهو خيار سهل الاستخدام للمبتدئين.

إعداد Node و npm

تعتمد معظم الأدوات هذه الأيام على Node.js، لذا يجب تثبيته من موقع Node.js كما يلي:

1. نزّل برنامج التثبيت على نظامك، فإذا كان لديك Node و npm مثبتين مسبقًا، فانتقل إلى الخطوة رقم 4.
2. ثبّته مثل أيّ برنامج آخر، ولاحظ أنّ Node يأتي مع مدير الحزم npm، مما يسمح لك بسهولة بتثبيت الحزم ومشاركة حزمك مع الآخرين وتشغيل السكربتات المفيدة في مشاريعك.
3. اختبر تثبيت Node بعد اكتمال التثبيت من خلال كتابة الأوامر التالية في الطرفية التي تعيد الإصدارات المُثبَّتة من Node و npm:

node -v
npm -v

4. إذا ثبّتَ Node و npm مسبقًا، فيجب تحديثهما إلى الإصدارات الأحدث، إذ يمكن تحديث Node من خلال تنزيل حزمة برنامج تثبيت محدَّثة وتثبيتها من الموقع الرسمي، ويمكن تحديث npm من خلال استخدام الأمر التالي في طرفيتك:

npm install npm@latest -g

يمكنك بدء استخدام الحزم المستندة إلى Node/npm في مشروعاتك من خلال إعداد مجلدات مشروعك بوصفها مشاريع npm، ويُعَدّ ذلك أمرًا سهلًا، فلننشئ أولًا مجلد اختبار مثلًا ولنعدّل ما نريده دون خوف.

أنشئ أولًا مجلدًا جديدًا في مكان مناسب باستخدام واجهة مستخدِم مدير الملفات أو على سطر الأوامر من خلال الانتقال إلى الموقع الذي تريده وتشغيل الأمر التالي:

mkdir node-test

يمكنك جعل هذا المجلد مشروع npm من خلال الانتقال إلى مجلد الاختبار وتهيئته كما يلي:

cd node-test
npm init

سيطرح عليك الأمر الثاني العديد من الأسئلة لمعرفة المعلومات المطلوبة لإعداد المشروع، ويمكنك تحديد الإعدادات الافتراضية فقط حاليًا، كما ستُسأَل بعد طرح جميع الأسئلة عمّا إذا كانت المعلومات التي أدخلتها صحيحةً، لذا اكتب yes واضغط على مفتاح Enter أو Return وسينشئ npm الملف package.json في مجلدك.

يُعَدّ هذا الملف ملف إعداد للمشروع ويمكنك تخصيصه لاحقًا، ولكن سيبدو كما يلي حاليًا:

{
  "name": "node-test",
  "version": "1.0.0",
  "description": "Test for npm projects",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "Chris Mills",
  "license": "MIT"
}

إعداد أداة Gulp للاختبارات الآلية

لنلقِ نظرةً على إعداد أداة Gulp واستخدامها لجعل بعض أدوات الاختبار آليةً.

أنشئ أولًا مشروع اختبار npm كما تحدّثنا سابقًا، إذ ستحتاج بعد ذلك لبعض النماذج لمحتوى HTML و CSS وجافاسكربت لاختبار نظامك، لذلك أنشئ نسخةً من الملفات index.html و main.js و style.css في مجلد فرعي باسم src ضمن مجلد مشروعك، كما يمكنك تجربة محتوى الاختبار الذي تريده، ولكن ضع في الحسبان أنّ هذه الأدوات لن تعمل على ملفات JS و CSS الداخلية، فأنت بحاجة إلى ملفات خارجية.

ثبّت الأداة Gulp تثبيتًا عامًا بحيث تكون متاحةً في جميع المشاريع باستخدام الأمر التالي:

npm install --global gulp-cli

شغّل بعد ذلك الأمر التالي ضمن جذر مجلد مشروع npm لإعداد أداة Gulp بوصفها اعتماديةً Dependency لمشروعك:

npm install --save-dev gulp

أنشئ الآن ملفًا جديدًا ضمن مجلد مشروعك بالاسم gulpfile.js، وهو الملف الذي سيشغّل جميع مهامنا، وضَع ما يلي ضمن هذا الملف:

const gulp = require('gulp');

exports.default = function(cb) {
  console.log('Gulp running');
  cb();
};

يتطلب ذلك وحدة gulp التي ثبّتناها مسبقًا، ثم يصدّر مهمةً افتراضيةً لا تفعل شيئًا سوى طباعة رسالة إلى الطرفية، وهذا مفيد لإعلامنا بأنّ أداة Gulp تعمل.

تُصدَّر كل مهمة من مهام gulp بالتنسيق الأساسي نفسه exports.taskName = taskFunction، وتأخذ كل دالة معامِلًا واحدًا هو دالة رد نداء callback لتشغيلها عند اكتمال المهمة.

يمكنك تشغيل مهمة gulp الافتراضية باستخدام الأمر التالي:

gulp

إضافة بعض المهام الحقيقية إلى أداة Gulp

يمكنك إضافة بعض المهام الحقيقية إلى أداة Gulp من خلال التفكير فيما نريد تطبيقه، إذ سنوضّح فيما يلي مجموعةً من الدوال الأساسية لتشغيلها في مشروعنا:

• html-tidy وcss-lint و js-hint للإبلاغ عن أو إصلاح أخطاء شيفرة HTML أو CSS أو JS الشائعة (اطّلع على gulp-htmltidy و gulp-csslint و gulp-jshint).
• Autoprefixer لفحص شيفرة CSS وإضافة بادئات البائع عند الحاجة فقط (اطلع على gulp-autoprefixer).
• babel لتحويل أيّ ميزات صيغة جافاسكربت جديدة إلى صيغة تقليدية تعمل في المتصفحات القديمة (اطلع على gulp-babel).

راجع الروابط السابقة للحصول على إرشادات كاملة حول حزم gulp المختلفة التي نستخدمها.

يجب أولًا تثبيت الإضافة عبر مدير حزم npm لاستخدامها، ثم طلب أيّ اعتماديات في الجزء العلوي من الملف gulpfile.js ثم إضافة الاختبار -أو الاختبارات- إلى الجزء السفلي منه وتصدير اسم مهمتك لتكون متاحةً باستخدام أوامر gulp.

html-tidy

ثبّتها باستخدام الأمر التالي:

npm install --save-dev gulp-htmltidy

ملاحظة: تضيف ‎--save-dev الحزمة بوصفها اعتماديةً لمشروعك، فإذا نظرت في الملف package.json الخاص بمشروعك، فسترى مدخلةً لها في الخاصية devDependencies.

أضِف بعد ذلك الاعتمادية التالية إلى الملف gulpfile.js:

const htmltidy = require('gulp-htmltidy');

أضِف الاختبار التالي إلى الجزء السفلي من الملف gulpfile.js:

function html(cb) {
  return gulp.src('src/index.html')
        .pipe(htmltidy())
        .pipe(gulp.dest('build'));
    cb();
}

صدّر مهمة html باستخدام ما يلي:

exports.html = html;

عدّل بعد ذلك تعليمة التصدير الافتراضية إلى ما يلي:

exports.default = html;

حصلنا هنا على ملف التطوير index.html باستخدام التابع gulp.src()‎ الذي يتيح الحصول على ملف مصدر لتطبيق شيء ما عليه، ثم استخدمنا بعد ذلك الدالة pipe()‎ لتمرير هذا الملف المصدر إلى أمر آخر لتطبيق شيء آخر عليه، حيث يمكننا ربط سلسلة من دوال pipe()‎ عليه بالقدر الذي نريده.

شغّلنا أولًا الدالة htmltidy()‎ على الملف المصدر التي تمر على الملف وتصلح الأخطاء فيه، وتكتب الدالة pipe()‎ الثانية ملف HTML الناتج في المجلد build.

لا بدّ أنك لاحظت أننا وضعنا عنصر <p> فارغ في نسخة الدخل من الملف، حيث أزالته الدالة htmltidy عند إنشاء ملف الخرج.

Autoprefixer و css-lint

ثبّتهما أولًا باستخدام الأمرين التاليين:

npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-csslint

ثانيًا، أضف الاعتماديات التالية إلى الملف gulpfile.js:

const autoprefixer = require('gulp-autoprefixer');
const csslint = require('gulp-csslint');

ثالثًا، أضِف الاختبار التالي إلى الجزء السفلي من الملف gulpfile.js:

function css(cb) {
    return gulp.src('src/style.css')
        .pipe(csslint())
        .pipe(csslint.formatter('compact'))
        .pipe(autoprefixer({
            cascade: false
        }))
        .pipe(gulp.dest('build'));
    cb();
}

رابعًا، أضِف الخاصية التالية إلى الملف package.json:

"browserslist": [
  "last 5 versions"
]

خامسًا، أضِف السطر التالي بعد التعريفات الثابتة const:

const { series } = require('gulp');

سادسًا، صدِّر مهمة css باستخدام ما يلي:

exports.css = css;

أخيرًا، عدّل المهمة الافتراضية إلى ما يلي:

exports.default = series(html, css);

حصلنا هنا على الملف style.css وشغّلنا الدالة csslint عليه والتي تعطي قائمةً بأخطاء شيفرة CSS في الطرفية، ثم شغلنا الدالة autoprefixer عليه لإضافة أيّ بادئات مطلوبة لجعل ميزات CSS الحديثة تعمل في المتصفحات القديمة، ويكون الخرج في نهاية سلسلة دوال pipe()‎ ملفَ CSS المعدَّل مع البادئات ضمن المجلد build.

لاحظ أنّ ذلك لن يعمل إذا لم تعثر الدالة csslint على أخطاء، لذا جرّب إزالة قوس معقوص من ملف CSS وأعِد تشغيل gulp لمعرفة الخرج الذي تحصل عليه.

js-hint و babel

أولًا، ثبّتهما باستخدام الأوامر التالية:

npm install --save-dev gulp-babel @babel/preset-env
npm install --save-dev @babel/core
npm install jshint gulp-jshint --save-dev

ثانيًا، أضِف الاعتماديات التالية إلى الملف gulpfile.js:

const babel = require('gulp-babel');
const jshint = require('gulp-jshint');

ثالثًا، أضِف الاختبار التالي إلى الجزء السفلي من الملف gulpfile.js:

function js(cb) {
    return gulp.src('src/main.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('build'));
        cb();
}

رابعًا، صدّر مهمة js باستخدام ما يلي:

exports.js = js;

أخيرًا، عدّل المهمة الافتراضية إلى ما يلي:

exports.default = series(html, css, js);

حصلنا هنا على الملف main.js وشغّلنا الدالة jshint عليه وأخرجنا النتائج في الطرفية باستخدام jshint.reporter، ثم مرّرنا الملف إلى الدالة babel التي تحوله إلى صيغة التنسيق القديم وتخرج النتيجة إلى المجلد build، وقد تضمّنت شيفرتنا الأصلية على دالة سهمية Arrow Function عدّلتها دالة babel إلى دالة ذات تنسيق قديم.

مزيد من الأفكار

يمكنك تشغيل الأمر gulp ضمن مجلد مشروعك بمجرد إعداد كل ما سبق، ويجب أن تحصل على الخرج التالي:

يمكنك بعد ذلك تجربة خرج الملفات من خلال مهامك الآلية بالنظر إليها ضمن المجلد build وتحميل الملف build/index.html في متصفح الويب، فإذا حصلت على أخطاء، فتحقق من أنك قد أضفت جميع الاعتماديات والاختبارات المذكورة سابقًا، وحاول تعليق أقسام شيفرة HTML/CSS/JavaScript ثم أعِد تشغيل gulp لمعرفة ما إذا كان بإمكانك معرفة المشكلة.

تأتي Gulp مع الدالة watch()‎ والتي يمكنك استخدامها لمراقبة ملفاتك وإجراء الاختبارات كلما حفظتَ ملفًا، لذا أضِف ما يلي إلى الجزء السفلي من الملف gulpfile.js مثلًا:

function watch() {
  gulp.watch('src/*.html', html)
  gulp.watch('src/*.css', css)
  gulp.watch('src/*.js', js)
}

exports.watch = watch;

أدخِل الآن الأمر gulp watch في طرفيتك، وستراقب أداة Gulp مجلدك، وتشغّل المهام المناسبة كلما حفظتَ تعديلًا في ملف HTML أو CSS أو جافاسكربت.

ملاحظة: المحرف * هو محرف بدل Wildcard، فالقصد هنا هو تشغيل هذه المهام عند حفظ أيّ ملفات من هذه الأنواع، كما يمكنك استخدام محارف البدل في مهامك الرئيسية مثل gulp.src('src/*.css')‎ التي تحصل على جميع ملفات CSS ثم تشغّل مهام pipe عليها.

اطّلع على مقال دليلك الشامل إلى أداة البناء Gulp في أكاديمية حسوب لمزيد من التفاصيل.

مشغلات المهام الأخرى

هناك العديد من مشغّلات المهام الأخرى المتاحة، فإننا لا نحاول القول أنّ الأداة Gulp هي أفضل حل موجود، ولكنها جيدة إلى حد ما للمبتدئين، كما يمكنك تجربة استخدام حلول أخرى مثل:

• تعمل الأداة Grunt بطريقة مشابهة جدًا للأداة Gulp باستثناء أنها تعتمد على المهام المحددة في ملف الإعداد بدلًا من استخدام شيفرة مكتوبة بلغة جافاسكربت.
• يمكنك تشغيل المهام مباشرةً باستخدام سكربتات npm الموجودة ضمن الملف package.json دون الحاجة إلى تثبيت أيّ نظام إضافي لتشغيل المهام، إذ تعمل سكربتات npm على أساس أنّ أشياء مثل إضافات Gulp تغلّف أدوات سطر الأوامر، لذلك إذا كان بإمكانك معرفة كيفية تشغيل الأدوات باستخدام سطر الأوامر، فيمكنك تشغيلها باستخدام سكربتات npm، إذ يكون التعامل معها أصعب قليلًا، ولكنها جيدة للأشخاص ذوي المهارات العالية في استخدام سطر الأوامر.

استخدام خدمات الاختبارات التجارية لتسريع اختبار المتصفحات

لنلقِ نظرةً الآن على الخدمات الخارجية التجارية لاختبار المتصفحات وما فائدتها.

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

يمكنك بعد ذلك رفع مستوى العتاد باستخدام واجهة برمجة تطبيقات API للوصول إلى الوظائف برمجيًا، مما يعني أنه يمكن دمج هذه التطبيقات مع مشغّلات المهام مثل بيئات Selenium المحلية وغيرها لإنشاء اختبارات آلية.

ملاحظة: هناك أنظمة تجارية أخرى متاحة لاختبار المتصفحات ولكن سنركّز في هذا المقال على LambdaTest و Sauce Labs و BrowserStack، كما ليست هذه الأنظمة بالضرورة أفضل الأدوات المتاحة، لكنها أدوات جيدة ومناسبة للمبتدئين.

LambdaTest

1. ابدأ بالتسجيل في نظام LambdaTest مجانًا.
2. سجّل الدخول، إذ يجب أن يحدث ذلك تلقائيًا بعد التحقق من عنوان بريدك الإلكتروني.

ملاحظة: يقدّم نظام LambdaTest حسابًا مجانيًا يمكنك من خلاله الوصول إلى منصته مدى الحياة على عكس مزودي خدمة اختبار التوافق مع المتصفحات عبر السحابة الأخرى، والفرق الوحيد بين خطته المدفوعة والمجانية هو مقدار الاستهلاك.، إذ يوفر نظام LambdaTest ستِّين دقيقة شهريًا للاختبار المجاني الآلي عبر شبكة Selenium Grid.

الأساسيات: الاختبارات اليدوية

سيوجّهك نظام LambdaTest بعد تسجيل الدخول إلى لوحة التحكم التي ستزودك بالتفاصيل المتعلقة بعدد الدقائق التي استهلكتها وعدد الجلسات المتزامنة الجارية والعدد الإجمالي للاختبارات حتى الآن والمزيد.

أولًا، يجب اختيار التبويب "اختبار الوقت الحقيقي Real Time Testing" من قائمة التنقل اليسرى لبدء الاختبار اليدوي.

ستُوجَّه عند النقر على التبويب "اختبار الوقت الحقيقي Real Time Testing" إلى شاشة حيث يمكنك اختيار إعداد المتصفح وإصداره ونظام التشغيل ودقة الشاشة التي تريد اختبار موقع الويب بها.

إذا نقرتَ على زر "البدء Start"، فستظهر شاشة تحميل توفر لك آلة افتراضية VM بناءً على إعداداتك، ثم يمكنك إجراء اختبار حي وتفاعلي للتوافق مع المتصفحات على موقع ويب.

إذا لاحظت وجود مشكلة في واجهة المستخدِم، فيمكنك مشاركتها مع زملائك من خلال التقاط لقطة شاشة لآلتك الافتراضية باستخدام زر لقطة الشاشة Screenshot، ويمكنك تسجيل مقطع فيديو لجلسة الاختبار من خلال الضغط على زر التسجيل في جلسة الاختبار.

حدّد لقطة الشاشة قبل رفعها إلى زملائك باستخدام محرّر الصور المبني مسبقًا.

استخدِم زر "تحديده على أساس خطأ Mark as Bug" لرفع الأخطاء إلى العديد من الأدوات الخارجية مثل Jira و Asana و Trello وغيرها، وبذلك يمكنك تسجيل خطأ مباشرةً من جلسة الاختبار على نظام LambdaTest إلى برنامج إدارة مشروعك.

ملاحظة: تُوضَع جميع مقاطع الفيديو والصور المُلتقَطة ضمن جلسة الاختبار في المعرض وسجلات الاختبار ومتعقّب المشاكل ضمن LambdaTest.

Sauce Labs

لنبدأ بتجربة نظام Sauce Labs.

1. أنشئ حسابًا تجريبيًا على Sauce Labs.
2. سجّل الدخول، إذ يجب أن يحدث ذلك تلقائيًا بعد التحقق من عنوان بريدك الإلكتروني.

الأساسيات: الاختبارات اليدوية

تحتوي لوحة تحكم Sauce Labs على الكثير من الخيارات المتاحة، وتأكّد حاليًا من أنك ضمن تبويب "الاختبارات اليدوية Manual Tests".

1. انقر على "بدء جلسة يدوية جديدة Start a new manual session".
2. اكتب في الشاشة التالية عنوان URL للصفحة التي تريد اختبارها (استخدم العنوان https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html مثلًا)، ثم اختر متصفحًا ونظام تشغيل تريد اختبارهما معًا باستخدام الأزرار والقوائم المختلفة، فهناك الكثير من الخيارات.

3. إذا نقرت على "بدء الجلسة Start Session"، فستظهر شاشة التحميل التي تشغّل آلةً افتراضيةً تعمل عليها مجموعة المتصفح ونظام تشغيل التي اخترتها.
4. يمكنك بعد انتهاء التحميل البدء في اختبار موقع الويب الذي يعمل في المتصفح المختار عن بُعد.

5. يمكنك رؤية تخطيط الموقع كما سيبدو في المتصفح الذي تختبره، وتحريك الفأرة والنقر فوق الأزرار وما إلى ذلك، إذ تتيح لك القائمة العلوية ما يلي:

• إيقاف الجلسة.
• إعطاء شخص آخر عنوان URL ليتمكن من مراقبة الاختبار عن بُعد.
• نسخ نص أو ملاحظات إلى حافظة بعيدة.
• أخذ لقطة شاشة.
• الاختبار في وضع ملء الشاشة.

ستعود بعد إيقاف الجلسة إلى تبويب الاختبارات اليدوية، حيث سترى مدخلةً entry لكل جلسة من الجلسات اليدوية السابقة التي بدأتها، وسيؤدي النقر على إحدى هذه المدخلات إلى إظهار المزيد من بيانات الجلسة، حيث يمكنك تنزيل لقطات الشاشة التي التقطتها سابقًا ومشاهدة مقطع فيديو للجلسة وعرض سجلات البيانات وغير ذلك.

ملاحظة: يُعَدّ ذلك مفيدًا جدًا، وهو أكثر ملاءمةً من الاضطرار إلى إعداد كل هذه المحاكيات والآلات الافتراضية بنفسك.

الخيارات المتقدمة: واجهة Sauce Labs API

يحتوي نظام Sauce Labs على واجهة برمجة تطبيقات مريحة تتيح لك استرداد تفاصيل حسابك والاختبارات الحالية برمجيًا وإضافة تعليقات توضيحية إلى الاختبارات بمزيد من التفاصيل مثل حالة النجاح أو الفشل التي لا يمكن تسجيلها باستخدام الاختبار اليدوي وحده، فيمكن أن ترغب مثلًا في تشغيل أحد اختبارات Selenium عن بُعد باستخدام نظام Sauce Labs لاختبار مجموعة معينة من المتصفحات وأنظمة التشغيل، ثم تمرير نتائج الاختبار مرةً أخرى إلى نظام Sauce Labs.

كما يحتوي على العديد من العملاء المتاحين للسماح لك بإجراء استدعاءات لواجهة API باستخدام بيئتك المفضلة سواءً كانت PHP أو Java أو Node.js أو غيرها.

لنلقِ نظرةً سريعة على كيفية وصولنا إلى واجهة برمجة التطبيقات باستخدام Node.js و node-saucelabs.

أعِدّ أولًا مشروع npm جديد لاختبار ذلك كما ذكرنا سابقًا، واستخدم اسم مجلد مختلف مثل sauce-test.

ثانيًا، ثبّت مغلّف Node Sauce Labs باستخدام الأمر التالي:

npm install saucelabs

ثالثًا، أنشئ ملفًا جديدًا ضمن جذر مشروعك بالاسم call_sauce.js وضع فيه المحتويات التالية:

const SauceLabs = require('saucelabs');

let myAccount = new SauceLabs({
  username: "your-sauce-username",
  password: "your-sauce-api-key"
});

myAccount.getAccountDetails((err, res) => {
  console.log(res);
  myAccount.getServiceStatus((err, res) => {
    // ‫حالة خدمات Sauce Labs
    console.log(res);
    myAccount.getJobs((err, jobs) => {
      // احصل على قائمة بجميع وظائفك
      for (const job of jobs) {
        myAccount.showJob(job.id, (err, res) => {
          let str = `${res.id}: Status: ${res.status}`;
          if (res.error) {
            str += `\x1b[31m Error: ${res.error}\x1b[0m`;
          }
          console.log(str);
        });
      }
    });
  });
});

رابعًأ، املأ اسم مستخدِم Sauce Labs ومفتاح API في الأماكن المشار إليها، كما يمكن استرجاعها من صفحة إعدادات المستخدِم الخاصة بك.

أخيرًا، تأكد من حفظ كل شيء وشغّل ملفك كما يلي:

node call_sauce

الخيارات المتقدمة: الاختبارات الآلية

سنغطّي تشغيل اختبارات Sauce Lab الآلية في المقال التالي.

BrowserStack

لنبدأ بالإصدار التجريبي من نظام BrowserStack.

1. أنشئ حسابًا تجريبيًا من BrowserStack.
2. سجّل الدخول، إذ يجب أن يحدث ذلك تلقائيًا بعد التحقق من عنوان بريدك الإلكتروني.
3. يجب أن تكون في صفحة الاختبار المباشرة عند تسجيل الدخول لأول مرة، فإذا لم يكن الأمر كذلك، فانقر على الرابط Live في قائمة التنقل العلوية.
4. إذا أردت استخدام Firefox أو Chrome، فيجب تثبيت إضافة متصفح في مربع حوار بعنوان "تفعيل الاختبار المحلي Enable Local Testing"، ثم انقر على زر "تثبيت Install" للمتابعة. ستظل قادرًا على استخدام بعض الميزات في المتصفحات الأخرى باستخدام Flash عمومًا، ولكن يمكن ألّا تحصل على التجربة الكاملة.

الأساسيات: الاختبارات اليدوية

تتيح لك لوحة تحكم BrowserStack Live اختيار الجهاز والمتصفح الذي ترغب في اختباره، حيث تكون المنصات في العمود الأيسر والأجهزة على اليمين، فإذا حرّكت الفأرة على كل جهاز أو نقرت عليه، فستحصل على مجموعة مختارة من المتصفحات المتوفرة على هذا الجهاز.

سيؤدي النقر على إحدى أيقونات المتصفح إلى تحميل اختيارك للمنصة/الجهاز/المتصفح، لذا اختر أحد الخيارات الآن وجرّبه.

ملاحظة: تشير أيقونة الجهاز الزرقاء بجوار بعض خيارات الجهاز المحمول إلى أنك ستختبر على جهاز حقيقي، وستُشغَّل الخيارات بدون هذه الأيقونة على المحاكي.

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

كما سترى قائمةً تسمح لك بالتحكم في الجلسة.

الميزات هنا هي كما يلي:

• "التبديل Switch": التغيير إلى مجموعة منصة/جهاز/متصفح أخرى.
• الاتجاه (تشبه أيقونة إعادة التحميل): تبديل الاتجاه بين الوضع الرأسي والأفقي.
• ملاءمة الشاشة (تبدو مثل أيقونة ملء الشاشة): ملء مناطق الاختبار بمقدار حجم الجهاز.
• التقاط خطأ (تبدو مثل الكاميرا): تأخذ لقطة شاشة ثم تسمح لك بالتعليق عليها وحفظها.
• متعقّب المشاكل (يبدو مثل مجموعة بطاقات): عرض الأخطاء/لقطات الشاشة التي جرى التقاطها مسبقًا.
• الإعدادات (أيقونة الترس): تسمح لك بتعديل إعدادات الجلسة العامة.
• المساعدة (علامة الاستفهام): للوصول إلى وظائف المساعدة أو الدعم.
• أدوات التطوير Devtools: تسمح لك باستخدام أدوات التطوير الخاصة بمتصفحك لتصحيح أو معالجة الصفحة المعروضة في متصفح الاختبار مباشرةً، ويعمل ذلك حاليًا فقط عند اختبار متصفح Safari على أجهزة iOS.
• معلومات الجهاز Device info: تعرض معلومات حول جهاز الاختبار.
• الميزات Features: تعرض الميزات التي يدعمها الإعداد الحالي مثل النسخ إلى الحافظة ودعم الإيماءات وما إلى ذلك.
• التوقف Stop: ينهي الجلسة.

ملاحظة: يُعَدّ ذلك مفيدًا جدًا، وهو أكثر ملاءمةً من الاضطرار إلى إعداد كل هذه المحاكيات والآلات الافتراضية بنفسك.

الميزات الأساسية الأخرى

إذا عُدتَ إلى صفحة BrowserStack الرئيسية، فستجد بعض الميزات الأساسية المفيدة الأخرى ضمن خيار قائمة "المزيد More" مثل:

• التجاوب مع الشاشات Responsive: أدخِل عنوان URL واضغط على إنشاء Generate، وسيحمّل BrowserStack عنوان URL على أجهزة متعددة ذات أحجام إطار عرض مختلفة، كما يمكنك في كل جهاز ضبط الإعدادات أكثر مثل حجم الشاشة للحصول على فكرة جيدة عن كيفية عمل تخطيط موقعك باستخدام عوامل الأشكال المختلفة.
• لقطات الشاشة Screenshots: أدخِل عنوان URL واختر المتصفحات/الأجهزة/المنصات التي تريدها، ثم اضغط على إنشاء لقطات شاشة Generate Screenshots، ثم سيأخذ BrowserStack لقطات شاشة لموقعك في جميع تلك المتصفحات ويجعلها متاحةً لك لعرضها وتنزيلها.

الخيارات المتقدمة: واجهة BrowserStack API

يحتوي نظام BrowserStack على واجهة برمجة تطبيقات مريحة تتيح لك استرداد تفاصيل خطة حسابك وجلساتك وعمليات البناء برمجيًا، كما يحتوي على العديد من العملاء المتاحين للسماح لك بإجراء استدعاءات لواجهة API باستخدام بيئتك المفضلة سواءً كانت PHP أو Java أو Node.js أو غيرها.

لنلقِ نظرةً سريعةً على كيفية وصولنا إلى واجهة برمجة التطبيقات باستخدام Node.js.

أعِدّ أولًا مشروع npm جديدًا للاختبار كما ذكرنا سابقًا، واستخدم اسم مجلد مختلف مثل bstack-test.

ثانيًا، أنشئ ملفًا جديدًا ضمن جذر مشروعك بالاسم call_bstack.js وضَع فيه المحتويات التالية:

const request = require("request");

let bsUser = "BROWSERSTACK_USERNAME";
let bsKey = "BROWSERSTACK_ACCESS_KEY";
let baseUrl = `https://${bsUser}:${bsKey}@www.browserstack.com/automate/`;

function getPlanDetails(){
    request({ uri: `${baseUrl}plan.json` }, (err, res, body) => {
    console.log(JSON.parse(body));
  });
    /* Response:
    {
        automate_plan: <string>,
        parallel_sessions_running: <int>,
        team_parallel_sessions_max_allowed: <int>,
        parallel_sessions_max_allowed: <int>,
        queued_sessions: <int>,
        queued_sessions_max_allowed: <int>
    }
    */
}

getPlanDetails();

ثالثًا، املأ اسم مستخدِم BrowserStack ومفتاح API في الأماكن المشار إليها، ويمكن استرجاعها من [لوحة تحكم BrowserStack](https://www.browserstack.com/automate الآلية).

رابعًا، تأكد من حفظ كل شيء وشغّل ملفك كما يلي:

node call_bstack

سنقدِّم فيما يلي بعض الدوال الأخرى الجاهزة المفيدة عند العمل مع واجهة برمجة تطبيقات BrowserStack:

function getBuilds(){
  request({ uri: `${baseUrl}builds.json` }, (err, res, body) => {
  /* Response:
  [
    {
      automation_build: {
        name: <string>,
        duration: <int>,
        status: <string>,
        hashed_id: <string>
      }
    },
    {
      automation_build: {
        name: <string>,
        duration: <int>,
        status: <string>,
        hashed_id: <string>
      }
    },
    ...
  ]
  */
};

function getSessionsInBuild(build){
  const buildId = build.automation_build.hashed_id;
  request({ uri: `${baseUrl}builds/${buildId}/sessions.json` }, (err, res, body) => {
    console.log(JSON.parse(body));
  });
  /* Response:
  [
    {
      automation_session: {
        name: <string>,
        duration: <int>,
        os: <string>,
        os_version: <string>,
        browser_version: <string>,
        browser: <string>,
        device: <string>,
        status: <string>,
        hashed_id: <string>,
        reason: <string>,
        build_name: <string>,
        project_name: <string>,
        logs: <string>,
        browser_url: <string>,
        public_url: <string>,
        video_url: <string>,
        browser_console_logs_url: <string>,
        har_logs_url: <string>
      }
    },
    {
      automation_session: {
        name: <string>,
        duration: <int>,
        os: <string>,
        os_version: <string>,
        browser_version: <string>,
        browser: <string>,
        device: <string>,
        status: <string>,
        hashed_id: <string>,
        reason: <string>,
        build_name: <string>,
        project_name: <string>,
        logs: <string>,
        browser_url: <string>,
        public_url: <string>,
        video_url: <string>,
        browser_console_logs_url: <string>,
        har_logs_url: <string>
      }
    },
    ...
  ]
  */
}

function getSessionDetails(session){
  const sessionId = session.automation_session.hashed_id;
  request({uri: `${baseUrl}sessions/${sessionId}.json`}, (err, res, body) => {
    console.log(JSON.parse(body));
  });
  /* Response:
  {
    automation_session: {
      name: <string>,
      duration: <int>,
      os: <string>,
      os_version: <string>,
      browser_version: <string>,
      browser: <string>,
      device: <string>,
      status: <string>,
      hashed_id: <string>,
      reason: <string>,
      build_name: <string>,
      project_name: <string>,
      logs: <string>,
      browser_url: <string>,
      public_url: <string>,
      video_url: <string>,
      browser_console_logs_url: <string>,
      har_logs_url: <string>
    }
  }
  */
}

الخيارات المتقدمة: الاختبارات الآلية

سنغطّي تشغيل اختبارات BrowserStack الآلية في المقال التالي.

TestingBot

لنبدأ باختبار نظام TestingBot.

1. أنشئ حسابًا تجريبيًا في TestingBot.
2. سجّل الدخول، إذ يجب أن يحدث ذلك تلقائيًا بعد التحقق من عنوان بريدك الإلكتروني.

الأساسيات: الاختبارات اليدوية

تسرد لوحة تحكم TestingBot الخيارات المختلفة التي يمكنك الاختيار من بينها، وتأكَّد من أنك حاليًا في التبويب Live Web Testing.

1. أدخِل عنوان URL للصفحة التي تريد اختبارها.
2. اختر مجموعة المتصفح/نظام التشغيل التي تريد اختبارها من خلال تحديدها من الشبكة.

3. إذا نقرت على "بدء المتصفح Start Browser"، فستظهر شاشة تحميل تشغّل آلة افتراضية تعمل عليها المجموعة التي اخترتها.

4. يمكنك بعد انتهاء التحميل البدء في اختبار موقع الويب الذي يعمل في المتصفح المختار عن بُعد.

5. يمكنك رؤية تخطيط الموقع كما سيبدو في المتصفح الذي تختبره، وتحريك الفأرة والنقر على الأزرار وما إلى ذلك، كما تتيح لك القائمة الجانبية ما يلي:

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

ستعود إلى الصفحة Live Web Testing بعد إيقاف الجلسة، حيث سترى مدخلةً لكل جلسة من الجلسات اليدوية السابقة التي بدأتها، كما سيؤدي النقر على إحدى هذه المدخلات إلى إظهار المزيد من بيانات الجلسة، إذ يمكنك تنزيل لقطات الشاشة التي التقطتها ومشاهدة مقطع فيديو للاختبار وعرض سجلات الجلسة.

الخيارات المتقدمة: واجهة TestingBot API

يحتوي نظام TestingBot على واجهة برمجة تطبيقات مريحة تتيح لك استرداد تفاصيل حسابك والاختبارات الحالية برمجيًا، وإضافة تعليقات توضيحية إلى الاختبارات مع مزيد من التفاصيل مثل حالة النجاح أو الفشل التي لا يمكن تسجيلها باستخدام الاختبار اليدوي وحده، كما يحتوي TestingBot على العديد من عملاء واجهة برمجة التطبيقات الذين يمكنك استخدامهم للتفاعل معها بما في ذلك عملاء NodeJS و Python و Ruby و Java و PHP.

سنوضّح فيما يلي مثالًا عن كيفية التفاعل مع واجهة TestingBot API مع اختبار عميل NodeJS وهو testingbot-api:

أعِدّ أولًا مشروع npm جديدًا للاختبار كما تحدثنا سابقًا، واستخدِم اسم مجلد مختلف مثل tb-test.

ثانيًا، ثبّت مغلّف Node TestingBot باستخدام الأمر التالي:

npm install testingbot-api

ثالثًا، أنشئ ملفًا جديدًا ضمن جذر مشروعك بالاسم tb.js وضَع فيه المحتويات التالية:

const TestingBot = require('testingbot-api');

let tb = new TestingBot({
  api_key: "your-tb-key",
  api_secret: "your-tb-secret"
});

tb.getTests(function (err, tests) {
  console.log(tests);
});

رابعًا، املأ مفتاح TestingBot Key و Secret في الأماكن المشار إليها، حيث يمكنك العثور عليها في لوحة تحكم TestingBot.

أخيرًا، تأكد من حفظ كل شيء وشغّل الملف كما يلي:

node tb.js

الخيارات المتقدمة: الاختبارات الآلية

سنغطّي تشغيل اختبارات TestingBot الآلية في المقال التالي.

الخلاصة

يمكنك الآن البدء في رؤية فوائد استخدام أدوات الاختبار الآلية لمساعدتك في عملية اختبار مواقع الويب، وسنتطرق في المقال التالي إلى إعداد نظام الاختبارات الآلية المحلي باستخدام Selenium وكيفية دمجه مع خدمات مثل Sauce Labs و BrowserStack و TestingBot.

ترجمة -وبتصرُّف- للمقال Introduction to automated testing.

اقرأ أيضًا

• بعض المشكلات الشائعة في اختبار قابلية الاستخدام وكيفية تجنبها للحصول على مراجعات صادقة
• قابلية الاستخدام وأهميتها في تجربة المستخدم
• كيفية اكتشاف دعم المتصفحات للميزات أثناء اختبار مشاريع الويب
• مدخل إلى اختبار مشاريع الويب للتوافق مع المتصفحات

يتضمن اكتشاف الميزات Feature Detection معرفة ما إذا كان المتصفح يدعم كتلةً معينةً من الشيفرة البرمجية ويشغّل شيفرةً مختلفةً اعتمادًا على ذلك، بحيث يمكن للمتصفح دائمًا توفير تجربة عمل ناجحة بدلًا من التعطل أو ظهور الأخطاء في بعض المتصفحات، ويوضح هذا المقال بالتفصيل كيفية كتابة شيفرة اكتشاف المتصفحات للميزات البسيطة وكيفية استخدام مكتبة لتسريع التطبيق والميزات الأصيلة Native لاكتشاف الميزات مثل الميزة ‎@supports.

• المتطلبات الأساسية: يجب أن تتعلم أساسيات لغات HTML و CSS وجافاسكربت JavaScript، وأن تكون لديك فكرة عن المبادئ عالية المستوى لاختبار التوافق مع المتصفحات.
• الهدف: فهم مفهوم اكتشاف الميزات والقدرة على تطبيق الحلول المناسبة في شيفرة CSS وجافاسكربت.

مفهوم اكتشاف الميزات

تكمن الفكرة وراء اكتشاف الميزات Feature Detection في أنه يمكنك إجراء اختبار لتحديد ما إذا كانت الميزة مدعومةً في المتصفح الحالي ثم تشغيل الشيفرة البرمجية شرطيًا لتوفير تجربة مقبولة في كل من المتصفحات التي تدعم الميزة والمتصفحات التي لا تدعمها، فإذا لم تطبّق ذلك، فلن تعرض المتصفحات التي لا تدعم الميزات التي تستخدمها في شيفرتك البرمجية الخاصة مواقعَك بصورة صحيحة وستفشل، مما يخلق تجربة مستخدِم سيئة.

لنطّلع على المثال الذي تطرقنا إليه في مقال معالجة المشاكل الشائعة للتوافق مع المتصفحات المختلفة في شيفرة جافاسكربت، إذ كان لدينا واجهة Geolocation API التي تعرض بيانات الموقع المتاحة للجهاز الذي يعمل عليه متصفح الويب، ولهذه الواجهة نقطة دخول رئيسية لاستخدامها وهي الخاصية geolocation التي يوفرها الكائن العام Navigator، لذا يمكنك اكتشاف ما إذا كان المتصفح يدعم تحديد الموقع الجغرافي أم لا باستخدام الشيفرة البرمجية التالية مثلًا:

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // اعرض الموقع على الخريطة باستخدام‫ واجهة Google Maps API مثلًا
  });
} else {
  // اجعل المستخدِم يختار من بين الخرائط الساكنة بدلًا من ذلك
}

لاكتشاف ميزة واحدة، تكفي تعليمة if ولكن يُفضَّل استخدام مكتبة اكتشاف ميزات مُنشَأة مسبقًا من أجل التطبيقات المعقّدة بدلًا من كتابة مكتبتك طوال الوقت، إذ تُعَدّ مكتبة مودرنيزر Modernizr المعيار القياسي لاختبارات اكتشاف الميزات وسنتطرق إليها لاحقًا.

لا تخلط بين اكتشاف الميزات والتعرف على المتصفح Browser Sniffing -أي اكتشاف المتصفح المُحدَّد الذي يصل إلى الموقع- الذي يُعَدّ ممارسةً سيئةً يجب عدم استخدامها، وراجع فقرة استخدام شيفرة التعرف على المتصفح السيئة من مقال معالجة المشاكل الشائعة للتوافق مع المتصفحات المختلفة في شيفرة جافاسكربت للتعرف على مزيد من التفاصيل.

كتابة اختباراتك الخاصة لاكتشاف الميزات

سنتعرّف في هذا القسم على تطبيق اختباراتك الخاصة لاكتشاف الميزات في كل من شيفرة CSS وجافاسكربت.

شيفرة CSS

يمكنك كتابة اختبارات لميزات CSS من خلال اختبار وجود خاصيات element.style.property -مثل الخاصية paragraph.style.transform- في شيفرة جافاسكربت.

يمكن أن يكون المثال التقليدي لذلك هو اختبار دعم قيمة subgrid ضمن التخطيط الشبكي Grid في المتصفح، إذ يمكننا استعمال القيمة subgrid التخطيط الشبكي الفرعي مع grid-template-columns و grid-template-rows في المتصفحات التي تدعم ضمن التخطيط الشبكي أما في المتصفحات التي لا تدعهما فنستخدم التخطيط الشبكي العادي ولكن لن تكون كما نريد مع subgrid.

بناء على المثال السابق، يمكن أن نضيف ملف تنسيق stylesheet ضمن الترويسة head في ملف HTML الأول فيه تنفيذ كل subgrid وذلك إن كانت مدعومة في المتصفح والآخر يستعمل التخطيط الشبكي العادي إن لم تكن مدعومة وذلك لتعويض نقص الدعم الحاصل وتجنب اختلال التنسيق، بالشكل التالي مثلًا:

<link href="basic-styling.css" rel="stylesheet" />
<link class="conditional" href="grid-layout.css" rel="stylesheet" />

يضيف هنا الملف basic-styling.css كل تنسيقات الصفحة المشتركة والمتوافقة لكل المتصفحات، وبالإضافة له يوجد ملفين CSS آخرين الذين أشرنا إليهما قبل قليل، الأول grid-layout.css والثاني subgrid-layout.css وسنضمن ملفًا منهما بناءً على دعم subgrid في المتصفح وسنستعمل لغة جافاسكربت JavaScript لاختبار دعمها ثم نُحدِّث قيمة href الذي يشير إليه العنصر <link> الثاني في الشيفرة السابقة أي ذي الصنف class="conditional"‎ بناء على دعم المتصفح.

نضيف وسم <script></script> إلى ملف HTML في الجزء السفلي من العنصر body قبل وسم الإغلاق <‎/body> مباشرة يحوي الشيفرة التالية:

const conditional = document.querySelector(".conditional");
if (CSS.supports("grid-template-columns", "subgrid")) {
  conditional.setAttribute("href", "subgrid-layout.css.css");
}

اختبرنا في الشيفرة السابقة إن كانت الخاصية grid-template-columns تدعم القيمة subgrid باستعمال التابع CSS.support()‎.

‎@supports

استخدَمتْ لغة CSS في الآونة الأخيرة آليةً لاكتشاف ميزاتها الأصيلة وهي ‎@supports باستخدام القاعدة @ التي تعمل بطريقة مشابهة لاستعلامات الوسائط Media Queries باستثناء أنها تطبّق شيفرة CSS بطريقة انتقائية بناءً على ما إذا كانت ميزة CSS مدعومة، بدلًا من تطبيق شيفرة CSS بطريقة انتقائية اعتمادًا على ميزة وسائط مثل الدقة أو عرض الشاشة أو نسبة العرض إلى الارتفاع aspect ratio.

يمكننا إعادة كتابة مثالنا السابق باستخدام ‎@supports كما يلي:

@supports (grid-template-columns: subgrid) {
  main {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(4, minmax(100px, auto));
  }

  .item {
    display: grid;
    grid-column: 2 / 7;
    grid-row: 2 / 4;
    grid-template-columns: subgrid;
    grid-template-rows: repeat(3, 80px);
  }

  .subitem {
    grid-column: 3 / 6;
    grid-row: 1 / 3;
  }
}

تطبّق كتلة قاعدة @ تنسيق CSS فيها فقط إذا دعم المتصفح الحالي التصريح grid-template-columns: subgrid;‎. ويجب تضمين تصريح كامل (وليس مجرد اسم خاصية فقط) وعدم تضمين فاصلة منقوطة في النهاية لكي يعمل كل شرط.

يتوفر لدى ‎@supports العبارات المنطقية OR و NOT و AND، فمثلًا ستطبق الكتلة التالية تنسيق التخطيط الشبكي grid العادي إن لم يكن المتصفح يدعم subgrid:

@supports not (grid-template-columns: subgrid) {
  /* ضع القواعد هنا */
}

يمكن أن يبدو ذلك ملائمًا أكثر من المثال السابق، إذ يمكننا تطبيق اكتشاف الميزات في CSS دون الحاجة إلى شيفرة جافاسكربت، ويمكننا التعامل مع جميع العبارات المنطقية في ملف CSS واحد مع تقليل طلبات HTTP، لذا هذه هي الطريقة المفضلة في اكتشاف الميزات دون اللجوء إلى جافاسكربت.

شيفرة جافاسكربت

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

ضع في بالك أن بعض الميزات معروفة بعدم قابليتها للاكتشاف، ارجع إلى صفحة Undetectables بدءًا من عام 2016.

إليك بعضًا من الأنماط الشائعة للميزات القابلة للاكتشاف:

عضو في كائن

تحقق مما إذا كان هناك تابع أو خاصية معينة (تكون عادةً نقطة دخولٍ إلى استخدام واجهة برمجة تطبيقات API أو ميزة أخرى تريد اكتشافها) موجودةً في الكائن الأب Object.

رأينا في مثال سابق استخدامًا لهذا النمط عند اكتشاف دعم واجهة Geolocation وذلك بفحص وجود العضو geolocation في الكائن navigator:

if ("geolocation" in navigator) {
  // navigator.geolocation الوصول إلى الواجهة
}

خاصية في عنصر

أنشئ عنصرًا في الذاكرة باستخدام التابع Document.createElement()‎ ثم تحقق من وجود خاصية فيه، ويوضح هذا المثال طريقةً لاكتشاف دعم الواجهة Canvas API:

function supports_canvas() {
  return !!document.createElement("canvas").getContext;
}

if (supports_canvas()) {
  // ‫ إنشاء عناصر canvas واستخدامها
}

ملاحظة: استخدمنا !! في المثال السابق وذلك لتحويل أي نوع بيانات إلى قيمة منطقية true أو false.

تابع في عنصر يعيد قيمة

أنشئ عنصرًا في الذاكرة باستخدام Document.createElement()‎ ثم تحقق من وجود تابع فيه، فإذا كان موجودًا، فتحقق من القيمة التي يعيدها.

اطلع على اختبار اكتشاف تنسيقات الفيديو في HTML5

خاصية في عنصر تحتفظ بقيمة

أنشئ عنصرًا في الذاكرة باستخدام التابع Document.createElement()‎ ثم اضبط خاصيةً على قيمة معينة، ثم تحقق من الاحتفاظ بالقيمة.

ملاحظة: تُعَدّ قيمة NOT المُضاعفَة في المثال السابق (!!) طريقةً لإجبار القيمة المُعادة لتصبح قيمة منطقية مناسبة بدلًا من القيمة true أو false التي يمكن أن تؤدي إلى تحريف النتائج.

اطّلع على مقال اكتشاف دعم المتصفحات لميزات HTML5 للعثور على مزيد من المعلومات، وضَع في الحسبان أنه توجد بعض الميزات التي لا يمكن اكتشافها بالرغم من كل ذلك.

الميزة matchMedia

تتيح ميزة جافاسكربت Window.matchMedia تشغيل اختبارات استعلام الوسائط ضمن شيفرة جافاسكربت، وتبدو كما يلي:

if (window.matchMedia("(max-width: 480px)").matches) {
  // شغّل شيفرة جافاسكربت هنا
}

يستخدِم تطبيق Snapshot مثلًا هذه الميزة لتطبيق مكتبة جافاسكربت Brick بطريقة انتقائية ويستخدِمها للتعامل مع تخطيط واجهة المستخدم لتخطيط الشاشات الصغيرة فقط (480 بكسل أو أقل)، كما نستخدِم أولًا السمة media لتطبيق مكتبة Brick CSS على الصفحة إذا كان عرض الصفحة 480 بكسل أو أقل فقط:

<link
  href="dist/brick.css"
  rel="stylesheet"
  media="all and (max-width: 480px)" />

نستخدِم بعد ذلك matchMedia()‎ في جافاسكربت عدة مرات لتشغيل دوال التنقل في مكتبة Brick مع تخطيط الشاشة الصغيرة فقط، ويمكن رؤية كل شيء دفعةً واحدةً في تخطيطات الشاشة الأوسع، لذلك لا نحتاج للتنقل بين العروض المختلفة.

if (window.matchMedia("(max-width: 480px)").matches) {
  deck.shuffleTo(1);
}

استخدام مكتبة Modernizr لتطبيق اكتشاف الميزات

يمكن تنفيذ اختبارات اكتشاف الميزات باستخدام تقنيات مثل التقنيات التي أوضحناها سابقًا، ويمكنك استخدام مكتبة مخصَّصة لاكتشاف الميزات لأنها تسهّل الأمور كثيرًا. تُعَد مكتبة Modernizr أساس جميع مكتبات اكتشاف الميزات، ويمكنها اكتشاف كل ما تحتاجه في أي وقت، ولنلقِ نظرةً على كيفية استخدامها.

يمكنك استخدام بناء التطوير الذي يتضمن كل اختبار ممكن لاكتشاف الميزات عندما تجرّب مكتبة Modernizr، لذا نزّل بناء التطوير كما يلي:

1. انقر على رابط بناء التطوير.
2. انقر على زر "البناء Build" الوردي الكبير على الصفحة التي تظهر.
3. انقر على رابط "التنزيل Download" الأعلى في مربع الحوار الذي يظهر.

احفظه في مكان ما مثل المجلد الذي تنشئ أمثلتك الأخرى فيه.

إذا أردت استخدام مكتبة Modernizr في عملية الإنتاج، فيمكنك الانتقال إلى صفحة التنزيل التي زرتها سابقًا ثم النقر على أزرار علامة الزائد للاطلاع على الميزات التي تريد اكتشافها فقط، وستنزّل بعد ذلك عند النقر على زر "البناء Build" بناءً مخصَّصًا يحتوي فقط على تلك الميزات التي جرى اكتشافها، مما يجعل حجم الملف أصغر بكثير.

شيفرة CSS

لنلقِ نظرةً على كيفية عمل مكتبة Modernizr من حيث التطبيق الانتقائي لشيفرة CSS.

أنشئ أولًا نسخةً من الملفين supports-feature-detect.html و supports-styling.css ثم احفظهما بالاسم modernizr-css.html و modernizr-css.css.

ثانيًا، عدّل العنصر <link> في شيفرة HTML بحيث يشير إلى ملف CSS الصحيح، ويجب تعديل العنصر <title> إلى شيء أكثر ملاءمةً:

<link href="modernizr-css.css" rel="stylesheet">

ثالثًا، أضِف العنصر <script> قبل عنصر <link> لتطبيق مكتبة Modernizr على الصفحة، إذ يجب تطبيق ذلك على الصفحة قبل أيّ شيفرة CSS (أو جافاسكربت) تستخدِمها.

<script src="modernizr-custom.js"></script>

رابعًا، عدّل وسم الفتح <html> بحيث يبدو كما يلي:

<html lang="en-us" class="no-js">
  …
</html>

جرّب تحميل صفحتك، وستحصل على فكرة عن كيفية عمل مكتبة Modernizr مع ميزات CSS، فإذا ألقيت نظرةً على فاحص DOM الخاص بأدوات المطور في متصفحك، فسترى أنّ مكتبة Modernizr قد حدّثت قيمة صنف class العنصر <html> كما يلي:

<html
  class="js no-htmlimports no-proximity sizes no-flash transferables applicationcache blobconstructor blob-constructor no-contextmenu (and loads of more values)">
  …
</html>

يحتوي هذا العنصر الآن على عدد كبير من الأصناف التي تشير إلى حالة دعم ميزات التقنيات المختلفة، فإذا لم يدعم المتصفح الميزة التخطيط الشبكي grid مثلًا على الإطلاق، فسيُعطَى العنصر <html> اسم الصنف no-cssgrid، كما هنالك عدة أصناف أخرى متعلقة مثلًا بالتخطيط grid مثل cssgridlegacy أو no-cssgridlegacy بناء على دعم المتصفح للإصدار القديم legacy من التخطيط الشبكي.

ملاحظة: يمكنك الاطلاع على قائمة الأصناف الكاملة وما تعنيه أسماؤها وما تقوم به بالرجوع إلى صفحة Features detected من Modernizr.

لسوء الحظ لا تفحص مكتبة Modernizr دعم بعض ميزات CSS الجديدة مثل subgrid التي رأيتها للتو وغيرها ولو كانت تفعل ذلك، لكنا عدلنا مثال ‎@support السابق بالشكل التالي:

main {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(4, minmax(100px, auto));
}
.item {
  display: grid;
  grid-column: 2 / 7;
  grid-row: 2 / 4;
  grid-template-rows: repeat(3, 80px);
}
‫/* ‫خاصيات المتصفحات مع خاصية subgrid الحديثة */
.csssubgrid .item {
  grid-template-columns: subgrid;
}
.csssubgrid .subitem {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
}
‫/* ‫الإجراءات الاحتياطية للمتصفحات التي لا تدعم خاصية subgrid الحديثة */
.no-csssubgrid .subitem {
  display: flex;
  flex: 33%;
}

يمكنك استهداف المتصفحات التي تدعم أو التي لا تدعم ميزة معينة باستخدام محددات أحفاد معينة بسبب وضع جميع أسماء الأصناف في العنصر <html>. لذلك طبّقنا هنا المجموعة العليا من القواعد فقط على المتصفحات التي تدعم subgrid ومجموعة القواعد السفلية فقط على المتصفحات التي لا تدعمها.

ملاحظة: ضع في الحسبان أنّ جميع اختبارات ميزات HTML وجافاسكربت الخاصة بمكتبة Modernizr تُذكَر في أسماء الأصناف، لذلك يمكنك تطبيق شيفرة CSS بطريقة انتقائية بناءً على دعم المتصفح لميزات HTML أو جافاسكربت إذا لزم الأمر.

شيفرة جافاسكربت

مكتبة Modernizr مُهيَّأة جيدًا لتطبيق اكتشاف ميزات جافاسكربت من خلال توفير كائن Modernizr العام للصفحة التي تُطبَّق عليها، ويحتوي هذا الكائن على نتائج اكتشاف الميزات بوصفها خاصيات true أو false.

حمّل المثال modernizr-css.html في متصفحك، ثم حاول الانتقال إلى طرفية جافاسكربت واكتب Modernizr.‎ متبوعةً ببعض أسماء هذه الأصناف كما يلي:

Modernizr.flexbox
Modernizr.xhr2
Modernizr.fetch

ستعيد الطرفية قيم true أو false للإشارة إلى ما إذا كان متصفحك يدعم هذه الميزات أم لا.

لنلقِ نظرةً على مثال لتوضيح كيفية استخدامك لتلك الخاصيات:

أنشئ أولًا نسخةً محليةً من الملف modernizr-js.html.

ثانيًا، اربط مكتبة Modernizr بشيفرة HTML باستخدام العنصر <script> كما فعلنا سابقًا ثم ضع هذا العنصر قبل العنصر <script> الموجود مسبقًا الذي يربط واجهة Google Maps API بالصفحة.

املأ بعد ذلك نص العنصر البديل YOUR-API-KEY في عنصر <script> الثاني بمفتاح Google Maps API صالح، ويمكنك الحصول على مفتاح من خلال تسجيل الدخول إلى حساب Google، والانتقال إلى صفحة الحصول على مفتاح أو المصادقة ثم انقر على الزر الأزرق "الحصول على مفتاح Get a Key" واتبع التعليمات.

أخيرًا، أضِف عنصر <script> آخر في الجزء السفلي من العنصر <body> وقبل وسم الإغلاق <‎/body> مباشرةً ثم ضع السكربت التالي ضمن الوسوم:

if (Modernizr.geolocation) {

  navigator.geolocation.getCurrentPosition(function(position) {

    let latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
    let myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      disableDefaultUI: true
    }
    let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  });

} else {
  const para = document.createElement('p');
  para.textContent = 'Argh, no geolocation!';
  document.body.appendChild(para);
}

جرب مثالك واستخدِم اختبار Modernizr.geolocation للتحقق مما إذا كان المتصفح الحالي يدعم تحديد الموقع الجغرافي، فإذا كان الأمر كذلك، فسنشغّل الشيفرة البرمجية التي تحدد موقع جهازك الحالي وترسمه على خريطة جوجل.

الخلاصة

لقد غطينا في هذا المقال اكتشاف دعم المتصفحات للميزات وعرضنا المفاهيم الرئيسية ووضحنا كيفية تطبيق اختبارات اكتشاف ميزاتك واستخدام مكتبة Modernizr لتطبيق الاختبارات بسهولة أكبر، وسنوضح في المقال التالي الاختبارات الآلية.

ترجمة -وبتصرُّف- للمقال Implementing feature detection.

اقرأ أيضًا

• مدخل إلى اختبار مشاريع الويب للتوافق مع المتصفحات
• استراتيجيات اختبارات مشاريع الويب للتوافق مع المتصفحات
• اكتشاف دعم المتصفحات لميزات HTML5

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

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

يومًا عن يوم، يتزايد الطلب على إنشاء مواقع الانترنت أكتر وأكتر، سواءً كان هذا الطلب لغرض شخصي أو لغرض تجاري، فسواء  كنت تريد إنشاء سيرة ذاتية CV أو portfolio، مدونة أو موقع شخصي، أو حتى موقع للتجارة الإلكترونية، أيا كان الاستخدام، فمع انتشار الانترنت، بات الطلب في ازدياد متواصل. وهذا جعل مهنة مطور الويب Web Developer تزداد هي الأخرى أهميةً أكتر وأكتر.

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

إذا أردت التعرف أكثر على كيفية بناء مواقع إنترنت من الصفر بواجهتيها، فننصحك بالانضمام إلى دورة تطوير واجهات المستخدم ودورة تطوير التطبيقات باستخدام لغة Python، ولا تنسَ الاستعانة خلال رحلة تعلمك وعملك بتوثيقات موسوعة حسوب المجانية. وإذا أردت متابعة المعلومات البرمجية العلمية مكتوبة فيمكنك الاطلاع على قسم البرمجة في أكاديمية حسوب، كما يمكنك متابعة جديد الفيديوهات التقنية المتاحة على يوتيوب أكاديمية حسوب مجانًا.

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

ما هي هندسة البرمجيات؟

هندسة البرمجيات Software Engineering هي تخصص يهتم بتطبيق المبادئ الهندسية في تصميم البرمجيات وتطويرها وتنفيذها، وكما تلاحظ تتكون هندسة البرمجيات من كلمتين هما البرمجيات والهندسة ولتبسيط الأمور يمكنك القول أن هندسة البرمجيات هي العلم الذي يمكنك من تطبيق مفاهيم الهندسة على البرمجة.

فإذا كانت البرمجة هي التي تمكنك من تطوير البرامج وكتابة شيفرات قابلة للتنفيذ، فالهندسة هي التي توفر لك تقنيات وآليات تساعدك في تنظيم عملك البرمجي بأفضل طريقة ممكنة وتضمن لك الجودة في كل مرحلة من مراحل إنتاج البرمجيات بدءًا من تحليل متطلبات البرنامج مرورًا بكتابة أكواده البرمجية وانتهاءً بصيانته وتحسينه.

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

ما أهمية تخصص هندسة البرمجيات؟

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

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

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

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

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

ويمكن هنا أن تلاحظ ما الفرق بين مطور التطبيقات ومهندس البرمجيات، فالمبرمج يمكن أن ينفذ المشروع ويكتب الكود البرمجي الخاص به وهو ما يعرف بتحقيق المشروع أو تنفيذه "Implementation" أما مهندس البرمجيات فيقوم بأكثر من ذلك بكثير فهو يخطط ويحلل متطلبات المشروع ويقدم أنسب الحلول لتحقيق المشروع بناءً على معرفته وخبرته الهندسية قبل البدء الشروع بكتابة الكود ويكون لديه تصور واضح عن العمل الذي يتم إنجازه بكافة مراحله.

ما الفرق بين هندسة البرمجيات وعلوم الحاسوب؟

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

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

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

كيف أتعلم هندسة البرمجيات؟

إذا وصلت لهذه الفقرة فلا بدّ أنك مهتم بتعلم هندسة البرمجيات وتتساءل عن المهارات الأساسية التي عليك تعلمها للتخصص في هذا المجال ودخول سوق العمل، وهنا دعني أخبرك أن أمامك طريقين أولهما هو الدراسة الأكاديمية المتخصصة في إحدى الجامعات وفي هذه الحالة قد تطول مدة دراستك لسنوات وقد تضطر لدراسة العديد من المواد النظرية التي لن تفيدك على الإطلاق في حياتك العملية، أو قد تضطر إلى دخول فرع علوم الحاسوب ثم التخصص في مجال هندسة البرمجيات في الدراسات العليا أي أنت مرتبط بحسب ما توفره المؤسسة التعليمية التي تنوي الالتحاق بها.

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

فيمكنك من خلال التعليم الذاتي والتدريب العملي اكتساب الخبرة الكافية كي تكون مؤهلًا للعمل في هذا المنصب، وإن كان الجمع بين المهارات والحصول على شهادة اختصاصية في مجال هندسة البرمجيات أو تطوير البرمجيات أو علوم الحاسوب أو الرياضيات أو أي مجال مشابه يوفر لك بلا شك فرصًا أفضل.

وفي هذا الصدد أود مشاركة نتائج جديرة بالانتباه من أحدث استطلاع رأي نشره موقع Stack Overflow الشهير نهاية عام 2022 والذي يجمع كبار المبرمجين المحترفين حول العالم حيث أظهر أن الغالبية العظمى من المطورين المشاركين لم يتعلموا البرمجة من الكليات والجامعات وإنما تعلموها بشكل ذاتي من مصادر التعلم المختلفة والدورات التدريبية عبر الإنترنت، ولا عجب في ذلك فمصادر التعلم عبر الانترنت ليست متنوعة فحسب بل تتميز بأنها تُحدَّث باستمرار لتواكب عالم البرمجيات المتغير والمتجدد.

وإذا كنت تبحث عن المزيد من الطرق والخيارات لتعلم البرمجة بسرعة وكفاءة، يمكنك الاطلاع على مقال كيف تتعلم البرمجة: نصائح وأدوات لرحلتك في عالم البرمجة.

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

كما تحتاج لتعلم مفهوم قواعد البيانات وأنواعها المختلفة ونظم إدراة قواعد البيانات وكيفية تخزين ومعالجة البيانات فيها وإجراء العمليات المختلفة عليها لإنشاء وحفظ بيانات التطبيقات والبرامج والتعامل معها بكفاءة.

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

عند هذه النقطة يمكنك دخول سوق العمل والبحث عن فرص باسم مهندس برمجيات ويمكنك حينها أن تتخصص في مجال برمجي محدد كتطوير الويب أو أمن المعلومات أو تطوير الألعاب أو غيرها من المجالات المتنوعة، وتتعلم التقنيات والأدوات التي تؤهلك للعمل في أحد التخصصات تلك واحترافه.

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

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

مجالات عمل اختصاص هندسة البرمجيات

قد تتساءل بعد أن تعلمت كل المهارات الضرورية للعمل كمهندس برمجيات أو مطور برمجيات هل يمكنني الحصول على فرصة عمل مناسبة لتخصصي وما هي مجالات العمل التي يمكنني العمل بها؟

والجواب نعم ستجد فرصة عمل تناسبك بلا شك فالطلب على مهندسي البرمجيات في سوق العمل كبير ومتنامٍ، فلا تكاد توجد مؤسسة أو صناعة أو قطاع من قطاعات العمل في عصرنا الحالي إلا وتحتاج للحلول البرمجية والتقنية لتحسين أداء عملها وتهتم بتوظيف مهندسي البرمجيات للاستفادة من خبراتهم ومهاراتهم في تطبيق هذه الحلول.

لكن عند البحث عن مجال للعمل في مجال هندسة البرمجيات سيكون عليك التركيز على العمل أو التخصص في مجال محدد، فعندما تطلب الشركات والمؤسسات مهندسي برمجيات تحدد غالبًا مهندسين بتخصص معين، وفيما يلي قائمة بأهم تخصصات العمل التي يمكن لمهندسي البرمجيات العمل بها وما التقنيات اللازمة لها:

مطور ويب

مطور الويب هو الشخص المسؤول عن تصميم وإنشاء مواقع وتطبيقات الويب المختلفة، ويمكن أن يتخصص في تطوير الواجهة الأمامية للموقع التي تعمل من طرف العميل أو تطوير الواجهة الخلفية التي تعمل من طرف الخادم أو يقوم بكلا الأمرين معًا ويطلق عليه في هذه الحالة اسم مطور ويب كامل "Full-Stack".

يمتلك مطورو الويب معرفة قوية باستخدام تقنيات الويب ولغات البرمجة مثل HTML و CSS وجافا سكربت وأجاكس …إلخ. ويقومون بكتابة تعليمات برمجية لإنشاء مواقع الويب ودمج قواعد البيانات مع الموقع الويب وتطوير ميزات جديدة للموقع الويب وصيانته.

يمكنك الرجوع إلى مقال تعلم تطوير الويب لمزيد من التفصيل حول هذا التخصص.

مطور تطبيقات الهاتف المحمول

يعد تطوير تطبيقات الهاتف المحمول من مجالات هندسة البرمجيات الأكثر طلبًا في سوق العمل ومطور التطبيقات هو المسؤول عن إنشاء واختبار وبرمجة تطبيقات الهواتف المحمولة والأجهزة اللوحية المختلفة وهو يطور تطبيقات لأهداف عامة أو تطبيقات مخصصة لتلبية احتياجات محددة للعملاء.

كي تعمل كمطور تطبيقات هاتف يجب أن تمتلك معرفة قوية بلغات برمجة مثل جافا سكربت وكوتلن وسويفت و Objective-C وأن تمتلك معرفة جيدة بأنظمة تشغيل الهواتف المحمولة مثل iOS و Android.

إن أردت المزيد من المعلومات، فارجع إلى مقال برمجة تطبيقات الجوال.

أخصائي دعم تقني

يمكن لمهندس البرمجيات العمل كذلك كاختصاصي دعم تقني، وهذا المجال يحتاج إلى فهم شامل للبرمجيات والأجهزة وأنظمة الشبكات كي يوفر الدعم الفني التقني اللازم للشركات وموظفيها، ويحل مشكلات الأجهزة والبرمجيات والشبكات الحاسوبية ويقوم بتثبيت البرامج اللازمة وتحديثها وإصلاح أي خلل بها …إلخ.

محلل أنظمة أو محلل نظم معلومات

يحتاج محلل الأنظمة لامتلاك معرفة متعمقة بالأنظمة والبرامج وتحديد أفضل الطرق للاستفادة من موارد المؤسسة التي يعمل بها لأداء العمل بفعالية.

فمهندس الأنظمة مسؤول عن تحديد احتياجات البنية التحتية التقنية وتحليل التكلفة والعوائد اللازمة لإعداد أنظمة المعلومات في المؤسسات والشركات التي يعمل بها.

محلل أمن معلومات

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

مسؤول قواعد البيانات

يهتم مسؤول قواعد البيانات بإنشاء وتصميم قواعد البيانات ويعنى بإدارة وصيانة قواعد بيانات الشركة والحفاظ على استقرارها وإجراء النسخ الاحتياطية لقاعدة البيانات وتعديلها عند الحاجة، ويجب أن يمتلك معرفة قوية بلغات قواعد البيانات التقليدية أو العلائقية مثل Oracle و Microsoft SQL Server و DB2 أو قواعد البيانات غير العلائقية المصممة للتعامل مع البيانات الضخمة.

للمزيد حول مجال قواعد البيانات، ارجع إلى مقال دليلك الشامل إلى قواعد البيانات.

مهندس ضمان الجودة

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

كما يمكن لمهندس البرمجيات العمل في العديد من المجالات المهمة الأخرى مثل:

• مهندس DevOps
• محلل معلومات الأعمال
• مسؤول عن اختبار جودة البرمجيات QA Tester
• مبرمج ألعاب
• مهندس ذكاء صنعي
• مشرف على مختبرات الحاسوب
• مدرس برمجة وحاسوب

ويمكنك الاطلاع على المزيد من المعلومات حول أكثر مجالات العمل انتشارًا في مقال مجالات البرمجة.

كيف أبدأ بالعمل في أحد مجالات هندسة البرمجيات؟

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

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

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

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

أخيرًا إذا كنت ترغب في العمل والتخصص في مجال هندسة البرمجيات، لكنك متردد حول إيجابيات وسلبيات هذا المجال وتراودك تساؤلات وشكوك فيما إذا كانت هذه المهنة مناسبة لك فعلًا، دعنا نختم مقالنا بمناقشة أبرز المزايا والعيوب المحتملة للعمل كمهندس برمجيات لعل ذلك يساعدك على اتخاذ القرار الأنسب لمستقبلك المهني.

إيجابيات وسلبيات تخصص هندسة البرمجيات

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

إيجابيات تخصص هندسة البرمجيات

يوفر تخصص هندسة البرمجيات العديد من الفوائد والإيجابيات وأهمها:

1. تعد هندسة البرمجيات من الوظائف الأعلى أجرًا.
2. الطلب على هندسة البرمجيات مرتفع ومعدل نموها أعلى من المهن الأخرى.
3. حرية العمل عن بعد من داخل المنزل إما بمفردك أو مع فريق عمل وضمن ساعات عمل مرنة.
4. إمكانية بدء مشروعك الخاص بأقل التكاليف، كل ما تحتاجه للبدء هو جهاز حاسوب واتصال بالإنترنت.
5. القدرة على تطوير برامج ضخمة ومعقدة عالية الجودة لم تكن لتتمكن من إنجازها بنجاح دون تطبيق مبادئ هندسة البرمجيات.
6. تطوير مهاراتك الحياتية وقدرتك على فهم المنطق وتحسين كفاءتك في حل المشكلات والتعامل مع التوتر والضغوطات.
7. مهارة عالية في التكيف بسرعة مع أي تطورات تقنية جديدة، فالتقنية تتطور باستمرار ومهندسو البرمجيات أشخاص منفتحون على تعلم أشياء جديدة كل يوم.

سلبيات تخصص هندسة البرمجيات

لاشك أن أي مجال لا يخلو من بعض الجوانب السلبية، وفيما يلي نذكر لك أبرز التحديات التي قد تواجهك عند العمل في مجال هندسة البرمجيات:

1. إذا قررت العمل كمهندس برمجيات فستضطر إلى الجلوس وراء حاسوبك لفترات طويلة جدًّا وهذا قد يعرضك لمشكلات صحية ويمكنك التغلب عليها باتباع نظام صحي ولعب تمارين رياضية.
2. مهنة مرهقة وتشكل الكثير من الضغوط وقد لا تجد فيها الكثير من أوقات الفراغ لا سيما عند العمل في ظل قيود زمنية ومواعيد نهائية للتسليم قد تضطرك للعمل لوقت متأخر وفي أيام العطل.
3. مهنة تتطلب الصبر والتركيز والانتباه الشديد للتفاصيل سواء في مرحلة كتابة الكود أو التصحيح أو الاختبار، وقد تضطر إلى قضاء ساعات في التنقل عبر الشيفرات البرمجية لاكتشاف سبب مشكلة أو إصلاح مشكلة معينة.
4. قد تميل إلى العزلة والوحدة خاصة إذا كنت تعمل من المنزل مما يؤثر على حياتك الاجتماعية وتواصلك مع الأصدقاء.
5. مجال هندسة البرمجيات متجدد ومتسارع النمو وهذا يتطلب منك التعلم المستمر وتطوير نفسك وتعلم أي أدوات وتقنيات جديدة لتضمن النجاح والاستمرارية.
6. يجب أن تبقى حريصا على مسألة الأمان وتحرص على حماية نفسك وعملائك من هجمات المتسللين الذين يحاولون سرقة البيانات أو تخريبها وتحرص على اتخاذ الاحتياطات الأمنية المناسبة كي لا تفقد ثقة عملائك.

ورغم ما سبق من سلبيات تذكّر أنك تستطيع تجاوزها إذا كنت تمتلك الشغف في مجال التقنية والبرمجة وكنت منفتحًا على تعلم كل جديد.

الخلاصة

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

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

هل أنت مهتم بأحد مجالات هندسة البرمجيات وترغب في تعلمه أو بدأت به فعلًا؟ شاركنا رأيك في المجال المفضل لديك وكيف تعلمته وما هي أبرز التحديات التي واجهتك في هذا المجال وكيف تخطيتها؟

اقرأ أيضًا

• الطريقة الأمثل لدراسة تخصص هندسة البرمجيات
• دليلك الشامل إلى برمجة التطبيقات
• دليلك الشامل لتعلم البرمجة
• تعرف على مجال تحليل البيانات
• علم البيانات Data science: الدليل الشامل