เนื่องด้วยที่ออฟฟิศมีการจัดโครงการร่วมกับมหาลัยในการทำเวิร์คช็อปกับนักศึกษา ผมจึงคิดทำโปรเจ็คเพื่อใช้ในการสอนเนื้อหาไปพร้อมๆกับการทำเวิร์คช็อป ซึ่งโดยบทความตอนนี้จะเป็นการปูพื้นการใช้ command line ในการติดตั้ง tool ต่างๆ
หยิบเบียร์ 1 กระป๋องมาค่อยๆจิบแล้วลง brew, node/npm, Angular CLI ก็เสร็จพอดี

เปิดกระป๋อง มอง terminal 💻
ลง brew กันก่อนครับ ซึ่ง tool ตัวนี้คือ package manager ยอดนิยมอีกตัวนึงของ macOS เปิด terminal แล้ว copy command นี้ไปวางเลยครับ/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
ระหว่างนี้ก็จิบซักอึก ทำตามขั้นตอนที่ขึ้นมาบอกเป็นระยะ นั่งรอซักพัก…


จิบที่สองลองเทส brew 🍺
ลองดูกันหน่อยครับว่า brew ใช้ได้รึยังโดย commandbrew -v
ซึ่ง ณ ที่เขียนบทความ brew version ล่าสุดคือ 2.1.16

ดีดนิ้วลง node
มาถึงคิว JavaScript runtime ยอดนิยม ซึ่งเราจะใช้ brew นี่แหละเป็นตัว install brew install node

จบขั้นตอนแรกแล้วครับ ตอนนี้เบียร์เหลือประมาณครึ่งกระป๋องขอแวบเข้าห้องน้ำก่อน
เหมือนพระมาโปรดเพราะมี angular cli
Google ได้ออกแบบให้ Angular มีความอิสระมากทั้งในแง่ของการออกแบบและการนำไปใช้ ซึ่งต้องแลกมาด้วยลำบากในการ setup ระบบให้พร้อมในการพัฒนาในขั้นต้น แต่ Google ก็ยังใจดีทำ tool ช่วยให้การ setup เหล่านี้ง่ายขึ้นมากซึ่งก็คือ Angular CLI นั่นเอง หรือเรียกชื่อสั้นๆว่า ng
การติดตั้งก็ทำผ่าน npmด้วย command npm install -g @angular/cli
สังเกตว่าจะมี option -g ห้อยไปด้วยซึ่งหมายความว่าเราต้องการลง node package @angular/cli เป็น global library เพราะเราจะใช้ package ตัวนี้เป็น global CLI ในการสร้างและขึ้นโครง Angular project ครับ
ระหว่างนี้ก็หาขนมมากินด้วยครับ กินไป จิ้มไป จิบไป 🍿
ถ้าลงเสร็จแล้วก็ลอง check version ดูครับด้วย command ng -v ควรจะขึ้นแบบนี้

ถึงตอนนี้ก็ครบถ้วนกระบวนความในการติดตั้ง tool ต่างๆจำเป็นในการสร้าง Angular project จากนี้ไปเราจะใช้คำสั่ง ng เป็นตัวเรียก Angular CLI ขึ้นมาทำงานในการสร้าง project, component, service, … หรือสั่งการ build deployment package เพื่อใช้ในการ deploy ซึ่งตัว ng ครอบคุมการทำงานได้แทบทั้งหมด
บทต่อไปเราจะมาว่ากันด้วยเรื่องการใช้งาน ng เบื้องต้นเช่นการ create project, component และเราจะมาดูกันว่าส่วนประกอบใน project มีอะไรบ้าง กระป๋องนี้หมดแล้ว เตรียมหยิบกระป๋องที่ 2 เลยครับ
อ้างอิง
brew : https://brew.sh/
Angular CLI : https://cli.angular.io/

