ما هو Bower؟

تتألّف صفحات الويب التي نراها على المتصفح من مكوِّنات متعددة؛ كأطر العمل والمكتبات وملفات JavaScript وCSS وغيرها.

‏Bower‏ أداة لإدارة هذه المكوِّنات (أو الحزم) المُخصّصة للويب، كالتثبيت والتحديث والحذف وغيرها من عمليات الإدارة.

يشبه Bower إلى حد كبير الأدوات المخصّصة لإدارة الحزم في لغات برمجة آخرى، مثل gem للغة Ruby وComposer لـPHP وnpm لـNode.js.

لكن ما الفائدة منه؟ ألا يمكنني متابعة عملي كما اعتدت من دونه؟

يمكننا الاستفادة من أداة Bower في عدّة أمور، فلنفرض أن مشروعك القادم يحتاج إلى استخدام مكتبة jQuery‏ وإطار عمل Twitter Bootstrap‏ وخطّ الأيقونات Font Awesome‏.

لتنزيل كل واحدة من المُتطلّبات يقوم المطور بما يلي:

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

لو كان المشروع يحتاج إلى 3 أدوات فقط سيقوم المطور بتكرار الخطوات السابقة 3 مرات، ولو كان يحتاج 10 أدوات سيقوم بتكرار الخطوات ذاتها 10 مرات! هل ترى حجم العمل المطلوب فقط لتحميل المُتطلّبات؟

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

bower install jquery bootstrap fontawesome

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

من ميزات هذه الأداة تحديد الإصدار المطلوب للمكوِّنات (سواء كانت مكتبات أو أطر العمل). إن كنتَ تريد مثلاً الإصدار رقم 3.1.1 من إطار عمل Twitter Bootstrap فيمكن أن تحدد هذا في أمر التثبيت نفسه، أما بالطريقة التقليدية فتحتاج إلى البحث هنا وهناك لتجد مبتغاك!

ملاحظة: سنأتي لطريقة الاستخدام بالتفصيل، الأمثلة السابقة فقط لتوضيح الفوائد والميزات التي يقدمها Bower.

من يستخدم Bower؟

الكثير من أطر العمل والمكتبات تستخدم Bower، على سبيل المثال:

• ‏Twitter Bootstrap‏ إطار العمل الشهير، مخصّص لإنشاء الواجهات وعناصر الويب.
• ‏Foundation‏ إطار عمل شبيه بـTwitter Bootstrap.
• ‏jQuery‏ مكتبة JavaScript الشهيرة.
• ‏Angular JS‏ مكتبة JavaScript لإنشاء تطبيقات وحيدة الصفحة (single-page applications).
• ‏Backbone‏ مكتبة JavaScript لإنشاء تطبيقات ويب بنمط MVC.

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

كيف أبدأ؟

مُتطلّبات الاستخدام

يحتاج Bower إلى وجود بيئة Node.js مع مدير الحزم الخاصّ بها npm وإلى نظام git على الحاسوب المراد تثبيت الأداة عليه.

تثبيت NodeJS

بالنسبة لمستخدمي Windows وMac OS، يمكن التوجه لموقع Node.js‏ وتنزيل ملف التثبيت المناسب حسب نظام التشغيل.

إن كنت تعمل على Linux يمكنك اتباع الطريقة السابقة. أو يمكن تثبيت Node.js عن طريق المستودعات الخاصّة بنظام التشغيل، مثلاً إن كنت تستخدم Ubuntu أو أحد مشتقاته، يمكن تثبيت Node.js عن طريق سطر الأوامر:

sudo apt-get install nodejs npm

تثبيت git

بطريقة مشابهة لتثبيت Node.js، يمكن التوجه لموقع git الرسمي وتنزيل ملف التثبيت المناسب لنظام التشغيل.

إن كنت تعمل على توزيعة Linux يمكن تثبيت git باستخدام المستودعات الخاصّة بنظام التشغيل، في حال استخدام توزيعة Ubuntu أو أحد مشتقاتها، يمكن تثبيت git عن طريق الأمر:

sudo apt-get install git

سطر الأوامر

إن كنت تعمل على Windows فسطر الأوامر هو واجهة DOS أو اختصاراً هو cmd. وإن كنت تعمل على Linux فهناك عدد من البرامج للتعامل مع سطر الأوامر أشهرها GNOME Terminal بحسب التوزيعة والواجهة التي تستخدمها. وإن كنت تعمل على Mac OS فيمكن أن تستخدم iTerm.

التثبيت

بعد التأكد من وجود المُتطلّبات على حاسوبك، ما عليك سوى فتح سطر الأوامر (command line) ثمّ كتابة الأمر:

npm install -g bower

ملاحظة: إن كنت تعمل على نظام Linux أو Mac OS وفشلت عملية التثبيت قد تحتاج لإضافة أمر sudo في البداية ليتم استخدام صلاحيات الجذر (root) في التثبيت، فيصبح الأمر:

sudo npm install -g bower

تهانينا! أصبحت أداة Bower موجودة على حاسوبك وقابلة للاستخدام. تابع معنا كيف تستخدمها.

استخدام Bower

أداة Bower هي أداة تعمل في سطر الأوامر، جميع الأوامر التي سنستخدمها تحتاج إلى كتابتها في سطر الأوامر (Command Line).

لنقم بفتح سطر الأوامر، ولنقم بإنشاء مجلد اسمه bower_tutorials ثمّ نتوجه إليه في المكان الذي قمنا بإنشاء المجلد فيه:

cd /home/ammar/www/bower_tutorials/

أصبحنا الآن جاهزين لبدء استخدام Bower.

1. تثبيت الحزم

ما رأيك لو نقوم بتثبيت jQuery الشهيرة؟ أمر سهل، لنكتب هذا الأمر في سطر الأوامر:

bower install jquery

أصبحت مكتبة jQuery الشهيرة موجودة في المجلد الذي أنشأته، داخل مجلد اسمه bower_components.

حسناً، لنقم بتثبيت إطار عمل Twitter Bootstrap لكن بنسخة قديمة هي 3.1.1، يمكن ذلك عن طريق:

bower install bootstrap#3.1.1

أصبح Twitter Bootstrap بنسخته القديمة 3.1.1 جاهزاً، ما رأيكم بسهولة الأمر مقارنة بالطريقة التقليدية؟

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

2. البحث عن الحزم

قد يحدث أن تقوم بطلب تثبيت حزمة أو مكوّن ولا يتم تثبيته، يمكن أن تتأكد من وجود الحزمة عن طريق البحث. لنبحث عن Bootstrap ولنرَ ماذا يحوي مستودع Bower، نكتب:

bower search bootstrap

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

    bootstrap git://github.com/twbs/bootstrap.git

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

bootstrap-sass-twbs git://github.com/twbs/bootstrap-sass.git

هذه نسخة رسمية من Twitter Bootstrap لكنها مخصّصة للعمل مع Sass بدلاً من ملفات CSS جاهزة.

3. حذف الحزم

بعد أن أصبح تثبيت الحزم واضحاً، ماذا لو قمتَ بتثبيت حزمة ثمّ لم تعد تريدها، أو قمتَ بتثبيت حزمة خاطِئة غير التي تريدها؟

لحذف الحزمة يمكن استخدام الأمر:

bower uninstall bootstrap-sass-twbs

كما يمكن حذف عدة حزم دفعة واحدة في نفس الأمر:

bower uninstall bootstrap jquery fontawesome

4. عن ملف bower.json: أهميته واستخداماته

لنفرض أنّك تعمل ضمن فريق، وقمتَ بتثبيت آخر نسخة من jQuery وآخر نسخة من Twitter Bootstrap، ثمّ بعد شهرين قام زميلك في العمل بتثبيت نفس الحزم. لكنّه تفاجئ أن هناك أخطاء بدأت بالظهور لم تكن تظهر من قبل. بدأ يبحث عن المشكلة وعن الحزم المنصبة، وجد أن إصدارات الحزم التي قام بتثبيتها تختلف عن إصدارات الحزم التي قمتَ بتثبيتها منذ شهرين، عندما كان المشروع يعمل بشكل جيد!

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

الحل للمثالين هو استخدام ملف bower.json.

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

bower install

هو نفسه أمر التثبيت لكن بدون ذكر أي حزم بعده، سيقوم عندها Bower بالبحث عن ملف bower.json وتثبيت الحزم المذكورة فيه حسب الإصدارات المذكورة.

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

كيفية إنشاء ملف bower.json ووضع الحزم المطلوبة بداخله

يمكن إنشاء ملف bower.json باستخدام أي محرر نصوص، لكن الطريقة الأفضل هي استخدام الأمر الخاصّ بإنشاءه عن طريق الأداة نفسها، كما يلي:

bower init

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

الخطوات هي:

? name: bower-introduction

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

? version: 0.0.0

يسأل هنا عن إصدار المشروع الجديد الذي تريد إنشاء ملف bower.json من أجله. بشكل افتراضيّ يكون الإصدار هو 0.0.0 ويمكن تغييره بكتابة رقم جديد وضغط زرّ Enter.

? description:

هنا نضع وصفاً للمشروع الحالي ثمّ نضغط زرّ Enter.

? main file:

هنا نضع الملف الرئيسي للمشروع مثلاً: index.html.

? what types of modules does this package expose?:

المقصود من هذا السؤال هو تحديد آلية عمل الوحدات المكوِّنة للمشروع (modules) عند كونه مشروع JavaScript متقدّماً.

تظهر في هذا السؤال 5 خيارات هي: amd وes6 وglobals وnode وyui. بشكل افتراضيّ لا يكون أي خيار منها محدداً. يمكن تحريك المؤشر باستخدام السهمين أعلى وأسفل، ثمّ ضغط زرّ المسافة لتحديد الخيار/الخيارات المطلوبة. ثمّ نضغط زرّ Enter للمتابعة إلى الخطوة التالية.

? keywords:

الكلمات المفتاحية للمشروع مفصولة بفواصل ,.

? authors: Ammar Alakkad <am.alakkad@gmail.com>

اسم أو أسماء المطورين للمشروع، يمكن أن يتم وضع اسم المطور يليه بريده الإلكتروني بين قوسين Name <email@example.com>‎. بشكل افتراضيّ يأخذ Bower الاسم والبريد الإلكتروني من إعدادات git الموجودة على الحاسوب.

? license: MIT

رخصة استخدام المشروع بشكل مختصر. إن كنت مهتمّاً بمعرفة أشهر الرخص ومتى تَستخدم كل واحدة يمكن الذهاب لموقع Choose an OSS license‏ يحوي توضيحاً بالإنكليزية.

? homepage:

رابط صفحة المشروع على الإنترنت إن وجدت.

? set currently installed components as dependencies?: Yes

إن كانت بعض الحزم قد ثُبتّت قبل إنشاء الملف، هل تريد أن يتم وضعها ضمن الحزم المطلوبة في الملف؟

? add commonly ignored files to ignore list?: Yes

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

? would you like to mark this package as private which prevents it from being accidentally published to the registry?: Yes

هل تريد جعل الحزمة خاصّة بحيث لا يتم إضافة على مستودعات Bower؟ الإجابة الافتراضيّة هي نعم. إن أردت أن تكون الحزمة خاصّة دون نشرها يمكن كتابة كلمة yes ثمّ ضغط زرّ Enter.

الفرق بين المُتطلّبات ومُتطلّبات التطوير

مُتطلّبات التطوير نستخدمها عند الرّغبة بالتطوير على المشروع نفسه، تحوي حزم مثل Unit Testing أو مُنشئ الوثائق (documentation).

المُتطلّبات هي الحزم المطلوبة لاستخدام المشروع. مثلاً عندما نستخدم إطار عمل Zurb Foundation نحتاج معه إلى مكتبة jQuery. جميع المُتطلّبات التي نحتاجها لتشغيل المشروع وليس إلى تطويره تعتبر من المُتطلّبات.

5. هل يمكن تثبيت الحزم في مجلد مختلف؟

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

نقوم بإنشاء ملف باسم ‎.bowerrc نضع بداخله:

{
    {
        "directory": "my_components"
    }
}

بهذا عند تثبيت أو تحديث الحزم، سيتم وضعها في مجلد my_components بدلاً من المجلد الافتراضيّّ.

6. هل هناك أدوات تدعم وتتناغم مع Bower؟

هناك عدد من الأدوات التي تدعم Bower منها:

• ‏CodeKit‏ تطبيق لنظام تشغيل Mac OS مخصّص لإنشاء المواقع.
• ‏Sublime Bower‏ إضافة لمحرر النصوص الشهير Sublime Text تسمح بتثبيت الحزم من خلال البرنامج نفسه.
• ‏Atom Bower Install‏ إضافة لمحرر Atom مفتوح المصدر تقوم بتثبيت الحزم من خلال البرنامج نفسه.
• ‏WebStorm‏ بيئة متكاملة لتطوير مواقع الويب تتميز بتكامل قويّ جداً مع JavaScript، يملك هذا البرنامج دعماً مدمجاً به لأداة Bower.
• ‏Visual Studio 2015‏ النسخة الأخيرة من Visual Studio مدمجة مع دعم لأداة Bower للبحث وتثبيت الحزم.
• ‏Package Intellisense for Visual Studio 2013‏ إضافة مخصّصة لـ Visual Studio لإضافة دعم مدير حزم Node.js مع أداة Bower.

هناك أيضاً عدد من الإضافات الخاصّة بمشغّلات المهام Grunt وGulp وbroccoli.

أي نوع من المشاريع يمكنني استخدام Bower معه؟

يمكنك استخدام Bower في أي مشروع ويب يحتاج إلى واجهاتٍ تظهر للمستخدم (front-end). سواء كانت المكوِّنات للاستخدام المباشر أو لمعالجتها واستخدامها في بناء مكوّنات مخصّصة بناءً على مُتطلّبات التصميم.

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

أرجو أن تكونوا قد استفدتم من هذا الشرح، في حال وجود أيّ استفسار أو تساؤل لا تتردّدوا بوضعه في التعليقات.