รู้จักกับ Bower: วิธีติดตั้งและใช้งาน

1. Bower คืออะไร?

Bower เป็นระบบจัดการ Web framework (หรือ Web Library แล้วแต่จะเรียก) ที่ทำให้เราดึง Web Framework ต่างๆ มาไว้ในโปรเจคเราได้อย่างรวดเร็ว ไม่ต้องไปนั่งไล่ดาวน์โหลดจากเว็บต่างๆ อีกต่อไป

ถ้ายังไม่เคยใช้ โค้ชพลจะสรุปเป้าหมายของ Bower ที่เราจะใช้ให้เข้าใจได้ง่ายๆ…

เริ่มแรก ก่อนที่จะมี Bower เว็บยังง่ายๆ อยู่

เมื่อก่อนเรายังไม่มีระบบ Web Framework มากขนาดนี้ เรานั่งเขียน HTML, CSS, Javascript กันเอง ก๊อปแปะกันเองใช่ไหม?

ทีนี้พอมันมีคนเขียน Web Framework อย่างเช่น JQuery, JQueyr Mobile, AngularJS ขึ้นมาเยอะขึ้น บางทีโหลด framework ตัวเดียวมาไม่พอ ต้องโหลดตัวที่มันไปเรียนใช้งานตัวอื่นมาอีกด้วย ระบบมันเลยซับซ้อนขึ้น

ต่อมา ปัญหาที่เกิดจาก Web framework เริ่มเยอะ

หลังจาก Web Framework มันเกิดขึ้นเป็นดอกเห็ด และเริ่มอ้างอิงกันและกันเรื่อยๆ ทำให้เวลาดาวน์โหลดมาใช้งาน ไม่ได้หยุดอยู่ที่เว็บเดียวอีกต่อไป

เราต้องไปนั่งเข้าเว็บ, ไล่ดาวน์โหลดไฟล์แต่ละตัวมาไว้ในเครื่อง, แล้วมานั่งลากไฟล์รวมไว้ใน folder เดียวกันทุกครั้งอย่างนั้นหรือ?

ให้ลองนึกถึงโปรเจคที่เราจำเป็นต้องใช้ Framework 3 ตัวด้วยกัน กว่าจะเปิดเว็บ กว่าจะ download โอย ตายๆ

จนกระทั่ง กำเนิด Bower

Bower จึงกำเนิดขึ้นมา โดยทีมงานของ Twittter โดยใช้เป็นระบบ download และจัดการเครื่องมือที่เราจำเป็นต้องใช้ในการทำเว็บต่างๆ นั่นเองครับ ซึ่งปัจจุบันคนทำเว็บรุ่นใหม่ๆ เกือบทุกคนจะนิยมใช้ Bower มาก เพราะสะดวกสบาย และทำงานได้รวดเร็วกว่า

2. วิธีติดตั้ง Bower

สำหรับขั้นตอนการติดตั้ง Bower ไว้ใช้งานนั้น จะเป็นการติดตั้งผ่านโปรแกรม Command Prompt (สำหรับ Windows) และโปรแกรม Terminal (สำหรับ MAC OS X)

2.1 ติดตั้ง NodeJS Package Manager (NPM)

กด Download ตัว Setup มาติดตั้งได้จากที่นี่

2.2 ติดตั้ง และใช้งาน Bower

ลองดูวิดีโอ แล้วทำตามไปพร้อมกันครับ

1) เริ่มทำการติดตั้ง Bower

โดยการพิมพ์คำสั่งต่อไปนี้ในโปรแกรม Command Prompt (Windows) หรือโปรแกรม Terminal (MAC OS X)

ให้แน่ใจว่าเครื่องของเราเชื่อมต่อกับอินเตอร์เน็ตอยู่ เพราะเจ้า npm จะทำการดาวน์โหลดระบบของ Bower และติดตั้งให้เอง

//Windows

npm install bower

//MAC OS X

sudo npm install bower

เสร็จแล้วจะได้คำสั่งขึ้นหน้าจอประมาณนี้ (ดูคร่าวๆ ไม่ต้องเหมือนเป๊ะๆ ก็ได้)

Bower install complete os x

2) ทดสอบใช้งาน Bower

เอาล่ะ ทีนี้เราจะลองใช้งาน Bower ดาวน์โหลด Web Framework อย่าง JQuery มาติดตั้งในโปรเจคของเรากัน

ขั้นแรกให้ลองสร้าง folder อันหนึ่งขึ้นมาบน Desktop ชื่อ “My Web App

My Web App test bower on windows

ทีนี้เราจะทำการเปิดโปรแกรม Command Prompt (Windows) หรือโปรแกรม Terminal (MAC OS X) ขึ้นมาจาก folder ดังกล่าว

  1. กดปุ่ม Shift ค้างไว้
  2. คลิกขวาที่ folder
  3. เลือกคำสั่ง Open Command Windows Here…

Open Command Prompt here

เปิดโปรแกรมแล้ว ลองพิมพ์คำสั่งด้านล่าง แล้วกด enter

bower install jquery

ถ้าระบบติดตั้งสมบูรณ์ก็จะมีการโต้ตอบคล้ายๆ ในภาพด้านล่าง (เป็นขั้นตอน ขึ้นอยู่กับประสิทธิภาพของเครื่อง และอินเตอร์เน็ตด้วย)

ถ้าขึ้นแบบภาพก็คือว่า Bower พร้อมใช้งานแล้วครับ ลองดูเนื้อหาเพิ่มเติมเกี่ยวกับ

Use Bower to install jquery

 

ศึกษาข้อมูลอ้างอิงได้จาก

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Menu