كيف تفكر كمبرمج

ترجمة بتصرف لمقال:(How to think like a programmer by free code camp)

ترجمة: علياء السليم

تدقيق الترجمة: عهود خوج

 

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

 

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

 

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

 

لن يطول الأمر، لنجعل اليوم هو اليوم الذي تتعلم فيه التفكير كمبرمج.

 

أنت الآن تستطيع التفكير مثل المبرمج.

 

هل سبق وأن جربت تمرين بسيط بالجافا في مكان مثل

freeCodeCamp أو Code Academy أو Code Wars ؟

 

إن كان سبق لك ذلك فأنت الآن  تستطيع التفكير كمبرمج.

 

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

 

للتغلب على تجمد المبرمج بسهولة, يمكنك اتباع التعليمات الأربع التالية:

 

١جزئ المشكلة إلى مشاكل صغيرة.

٢أوجد حلول للمشاكل الصغيرة.

٣اجمع الحلول بطريقة متناسقة.

٤طور وأعد الصياغة.

 

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

 

الخطوة ١: تجزئة المشكلة إلى مشاكل صغيرة.

كيف تضع الفيل في الثلاجة؟

هذه بعض الأجابات المحتملة لبعض الناس:

١– افتح الثلاجة

٢أدخل الفيل

٣أغلق الثلاجة

حُلت المشكلة.

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

 

عندما تفكر بمنطقية في السؤال، سترى القليل من المشاكل البارزة دون إجابة:

١عن أي ثلاجة نحن نتحدث؟

٢أي نوع من الفيلة نحن نتحدث؟

٣لو كان الفيل ضخم جداً ليدخل الثلاجة، ماذا ستفعل؟

٤أين تجد الفيل من الأساس؟

٥كيف ستنقل الفيل إلى ثلاجتك؟

 

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

 

الخطوة الثانية: إيجاد حلول لمشاكلك الصغيرة.

 

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

 

١أي ثلاجة؟ الثلاجة الموجودة في مطبخك

٢أي نوع من الفيلة؟ فيل الأدغال الأفريقية

٣لو كان الفيل كبير جداً؟ أحضر مسدساً لتقليص الفيل (😎).

٤أين تجد الفيل ؟ في أفريقيا

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

 

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

١من أين حصلت على مسدس التقليص؟ استعرته من جاري العالِم المجنون.

٢أين تستطيع أن تجد الفيل في أفريقيا؟ حديقة أدو للفيلة في جنوب أفريقيا.

 

عندما تجيب على كل المشاكل الصغيرة، تضعها سوياَ لحل مشكلتك الكبيرة.

 

الخطوة الثالثة: جمع الحلول بطريقة متناسقة.

في مثال وضع الفيل في الثلاجة تستطيع تتبع الخطوات التالية:

 

١أحضر مسدس تقليص من جارك العالِم

٢سافر إلى جنوب أفريقيا

٣إذهب إلى حديقة أدو للفيلة

٤جد فيلاَ في الحديقة

٥صوّب مسدس التقليص على الفيل

٦ضع الفيل المتقلص في حقيبتك

٧توجه عائداً إلى المطار

٨سافر إلى بلدك

٩–  ارجع إلى بيتك

١٠أدخل الفيل في ثلاجتك

 

حُلت المشكلة.

 

أمر مثير للإهتمام ، ولكنك غالباً لن تحتاج أن تجد فيلاً لتضعه في ثلاجتك مع نص الجافا.

لنستخدم مثالاً حقيقاً.

لنقل أنك تريد إنشاء زر عند الضغط عليه تظهر لك قائمة فرعية.

صورة ٣

الخطوة الأولى جزئ / فصّل

فصّل المكون إلى أجزاء صغيرة. إليك بعض المشاكل التي تحتاج إلى تحديد:

١ماذا سيكتب على الزر؟

٢كيف سيكون شكل الزر؟

٣ماذا سيحدث عندما يتم الضغط على الزر ضغطة واحدة؟

٤ماذا سيحدث عندما يتم الضغط على الزر مرة أخرى؟

٥ماذا سيحدث عندما يتم الضغط على الزر مرة ثالثة؟

٦ماذا سيكتب على القائمة الفرعية؟

٧كيف سيكون شكل القائمة الفرعية عندما تظهر؟

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

٩كيف ستظهر القائمة الفرعية؟

١٠كيف ستختفي القائمة الفرعية؟

١١هل يجب أن تظهر القائمة الفرعية عند تحميل الصفحة؟

 

الخطوة الثانية إيجاد حلول للمشاكل

 

لإيجاد حلول لابد أن يكون لديك المعرفة بالوسيط الذي تتعامل معه. في حالتنا لابد أن يكون لدينا الكم الكافي من المعلومات في HTML وCSS و JavaScript.

 

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

لنجب على كل سؤال:

–  بماذا سيُعلّم الزر؟

سيُعلّم باستخدام <a> إشارة إلى الزر الإعتيادي

<a href=”#” class=”button”>Click me</a>

 

–  كيف سيكون شكل الزر؟

هذا الزر لابد أن يحتوي على CSS التالي:

.btn {

 display: inline-block;

 font-size: 2em;

 padding: 0.75em 1em;

 background-color: #1ce;

 color: #fff;

 text-transform: uppercase;

 text-decoration: none;

}

 

ماذا سيحدث عندما يتم الضغط على الزر ضغطة واحدة؟ ضغطتين ؟ وثلاث ضغطات؟

القائمة الجانبية لابد أن تظهر عند الضغط للمرة الأولى. تختفي عند الضغط للمرة الثانية . ثم تظهر مرة أخرى عند الضغط للمرة الثالثة.

 

بماذا ستعلّم القائمة الجانبية؟

القائمة الجانبية يجب أن تكون معرّفة ب

التي تحتوي على قائمة من الروابط:

 

كيف سيكون شكل القائمة الجانبية عندما تظهر؟

القائمة الجانبية يجب أن تكون على يمين الصفحة حتى يتمكن المستخدم من ملاحظتها. يجب أن تكون سعتها ٣٠٠ بكسل.

 

عندما تنتهي من حل المشكلة، قد تحتاج إلى الإنهاء باستخدام CSS التي سيبدو مشابها للتالي:

.sidebar {

 position: fixed;

 top: 0;

 bottom: 0;

 right: 0;

 width: 300px;

 background-color: #333;

}

 

.sidebar ul {

 margin: 0;

 padding: 0;

}

.sidebar li {

 list-style: none;

}

 

.sidebar li + li {

 border-top: 1px solid white;

}

 

.sidebar a {

 display: block;

 padding: 1em 1.5em;

 color: #fff;

 text-decoration: none;

}

 

كيف سيكون شكل القائمة الجانبية عندما تحتفي؟

القائمة الجانبية يجب أن تنتقل إلى اليمين بسعة ٣٠٠ بكسل ، لذلك ستختفي من الشاشة.

 

عندما تجيب عن هذه الأسئلة، سيطرأ على ذهنك سؤالان آخران:

١كيف ستعرف إذا ظهرت القائمة الجانبية أم اختفت؟

٢كيف ستكون طريقة إخفاء القائمة الفرعية؟

 

لنجب عنهم أيضاً.

* كيف ستعرف إذا ظهرت القائمة الجانبية أم اختفت؟

إذا كانت القائمة الجانبية تحتوي على فئة is-hidden، فيجب أن تختفي. ماعدا ذلك فيجب أن تكون مرئية.

* كيف ستكون طريقة إختفاء القائمة الجانبية؟

نحن نستخدم translateX لتحريك القائمة الجانبية ٣٠٠ بكسل لليمين, بما أن transform(تحويل) تعد من أفضل أدوات المكونات. ستكون طريقتها بهذا الشكل:

.sidebar.is-hidden {

 transform: translateX(300px);

}

 

كيف ستظهر القائمة الجانبية؟

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

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

.sidebar {

 /* other properties */

 transition: transform 0.3s ease-out;

}

 

كيف ستختفي القائمة الجانبية؟

يجب أن تختفي بنفس الطريقة التي ظهرت فيها، لكن بالاتجاه المعاكس. هنا لاتحتاج كتابة اي رمز CSS إضافي.

١١هل يجب أن تظهر القائمة الجانبية عند تحميل الصفحة؟

لا، بالمعطيات التي لدينا نستطيع إضافة فئة is-hidden لترميز القائمة الجانبية ,وبالتالي القائمة الفرعية ستبقى مختفية.

تقريباً نحن الآن أجبنا عن معظم الأسئلة ماعدا سؤال واحدماذا سيحدث عندما يتم الضغط على الزر ضغطة واحدة، ضغطتين و ثلاث ضغطات؟.

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

الضغط مرة واحدة، لكن كيف؟

وأنها يجب أن تختفي عند الضغط مرة ثانية، لكن كيف؟

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

 

كيف نعرف متى يتم الضغط على الزر؟

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

قبل إضافة زر مستمع الضغط، ستحتاج إلى إيجاد الزر باستخدام querySelector.

 

const button = document.querySelector(‘.btn’)

 

button.addEventListener(‘click’, function() {

 console.log(‘button is clicked!’)

})

 

ماذا يحدث عندما يتم الضغط على الزر مرة واحدة؟

is-hiddenعندما تضغط على الزر مرة، لابد أن تحذف فئة  

وبذلك سيظهر الزر. لحذف فئة في نص الجافا نستخدم

Element.classList.remove

هذا يعني أننا نحتاج اختيار القائمة الجانبية أولاً.

const button = document.querySelector(‘.btn’)

const sidebar = document.querySelector(‘.sidebar’)

 

button.addEventListener(‘click’, function() {

 sidebar.classList.remove(‘is-hidden’)

})

 

ماذا يحدث عندما يتم ضغط الزر مرة ثانية؟

  وبالتالي ستختفي القائمة الجانبية عند الضغط على الزر للمرة الثانية. is-hidden لابد من إضافة  للأسف لا نستطيع عد المرات التي تم فيها ضغط الزر( المستمع للضغط), فأفضل طريقة هي التحقق من وجود

في القائمة الجانبية is-hidden   

 

                    فإذا كان موجوداً نزيله, وإذا كان غير موجود نضيفه

const button = document.querySelector(‘.btn’)

const sidebar = document.querySelector(‘.sidebar’)

 

button.addEventListener(‘click’, function() {

 if (sidebar.classList.contains(‘is-hidden’)) {

   sidebar.classList.remove(‘is-hidden’)

 } else {

   sidebar.classList.add(‘is-hidden’)

 }

})    

 

وبهذا يكون لديك نموذج أولي:

https://codepen.io/zellwk/pen/zdqmLe/

 

رابعاً: طور وأعد الصياغة:

 

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

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

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

في المثال السابق تستطيع أن تسأل أسئلة إضافية:

١كيف ستجعل القائمة الجانبية ميسرة للمستخدمين الذي لديهم صعوبة في النظر؟

٢كيف ستجعل القائمة الجانبية سهلة الاستخدام لمن يعملون على لوحة مفاتيح؟

٣هل نستطيع تطوير الرمز على أي حال؟

 

 (مفتاح تبديل)toggle في النقطة الثالثة، لو بحثت أكثر في جوجل ستلاحظ أن هناك طريقة   

toggle التي تزيل فئة ما لو ظهرت. وإذا لم تظهر فإن طريقة

ستضيفها:

const button = document.querySelector(‘.btn’)

const sidebar = document.querySelector(‘.sidebar’)

 

button.addEventListener(‘click’, function() {

 sidebar.classList.toggle(‘is-hidden’)

})

الخاتمة:

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

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

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

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

 

على فكرة، إذا كنت ترغب بعمل  نص الجافا ولكن لاتعرف من أين تبدأ؟ حاول أن تبدأ من هنا حيث قمت ببناء لك JavaScript Roadmap

فيه ستتعلم فيه كيف تتغلب على الصعاب التي تواجهها وستتبع خارطة طريق للتعلم. استمتع.

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

المصدر

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *