حسّن منهجيّتك في تطوير الواجهات 1 – Bower

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

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

حسّن منهجيّتك في تطوير الواجهات 1 – Bower

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

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

node --version
npm --version

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

مدير الحزم Bower

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

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

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

تنصيب Bower

يتم تنصيب Bower بامر بسيط مثل أي حزمة من Node.js، لكن تذكر استخدام الخيار g- لجعل الحزمة عامة وقابلة للتنفيذ من أي مجلد.

npm install -g bower

لا تخف من شلال الأوامر الذي سيظهر تلقائياً، ودع NPM يقوم بعمله!

يمكنك التحقق من اكتمال التنصيب بشكل صحيح بتنفيذ الأمر التالي الذي يجب أن يرد رقم إصدار Bower:

bower --version

إقلاع المشروع

تأكد أولاً أن سطر الأوامر الذي تعمل عليه يشير إلى مجلد مشروعك.

يحتاج Bower لوجود ملف bower.json ضمن مجلد المشروع، هنالك طريقتان لإنشاء هذا الملف:

الطريقة الأولى: إنشاء الملف يدوياً

بما أنه ملف JSON، لا أعتقد أنه سيصعب عليك إنشاؤه باستخدام أي محرر نصوص. يجب أن يحوي الملف شيئاً مشابهاً لما يلي:

{
    "name": "bower-demo",
    "version": "0.1",
    "description": "Trying out BOWER",
    "license": "MIT",
    "private": true,
    "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
    ],
    "dependencies": {
        "jquery": "~2.0.3",
        "css3-magic": "*"
    },
    "devDependencies": {
        "qunit": "~1.13.0"
    }
}

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

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

لديك كامل الحرية في تعديل المعلومات المذكورة في الملف وتحديد الحزم التي تلزم لمشروعك. نقوم بعد إنشاء الملف بتنفيذ الأمر التالي:

bower install

يقوم Bower هنا بقراءة الحزم المطلوبة من الملف وجلبها من سجل الحزم وتخزينها في مجلد bower_components ضمن المجلد الرئيسي للمشروع.

الطريقة الثانية: لا تتعب نفسك!

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

bower init

من المستحسن أن يضاف مجلد bower_components إلى ملف gitignore ليتم تجاهله عند إدارة الملفات باستخدام Git، حيث أن الملفات ضمن هذا المجلد هي مكتبات خارجية لست بحاجة لإدارتها، وفي حال فقدتها وأردت استعادتها لا يلزمك سوى ملف bower.json المناسب وتنفيذ أمر install.

تنصيب حزم جديدة

قد تكتشف خلال سير مشروعك حاجة لإضافة حزم جديدة. يمكنك إجراء بحث ضمن سطر الأوامر أو المستعرض لتتأكد من وجود الحزمة المطلوبة ضمن سجل الحزم، ثم تنفيذ أمر install متبوعاً باسم الحزمة (ورقم الإصدار بشكل اختياري) لجلبها إلى مجلد الحزم، ولتسهيل العملية يمكن استخدام أحد الخيارين save– أو save-dev– ليضاف اسم الحزمة إلى ملف  bower.json بشكل تلقائي:

bower search keyword
bower install package --save
bower install package#version --save-dev

استخدام الحزم

هذا ببساطة عائد لك ولطريقتك في العمل، يمكنك استدعاء الملفات المناسبة بالطريقة التقليدية:

<script src="bower_components/jquery/jquery.min.js"></script>
<link href="bower_components/css3-magic/magic.min.css" rel="stylesheet" type="text/css">

أو يمكنك استخدام مكتبة لتحميل الملفات مثل RequireJS للمشاريع الأكثر تعقيداً.

استمتع بأداتك الجديدة

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

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

للمزيد من المعلومات حول Bower:

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

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

انتظرونا في الأجزاء القادمة من هذه السلسلة!

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

التعليقات مغلقة.