วิธีติดตั้งโปรแกรม สำหรับหลักสูตร “สร้าง Web, iOS, และ Android Application ด้วย Angular Framework”

สำหรับคอร์สใหม่สำหรับคนทำเว็บ ที่ต้องการเรียนรู้แนวทางพัฒนาแอพพลิเคชั่นทั้ง Web, iOS, และ Andorid App ด้วย Angular Framework ในช่วงปี 2017 – 2018 นี้ ใช้เวลา 5 วันครับ

โค้ชพลขอแชร์โปรแกรม และระบบที่เลือกใช้ เผื่อพวกเราที่สนใจจะได้มีเครื่องมือดีๆ ไปใช้กัน โดยเฉพาะ Visual Studio Code Extension ที่คัดสรรมาเป็นอย่างดีครับ

เนื้อหาหลักๆ ที่จะเรียนในคอร์สนี้ ได้แก่

1. เข้าใจง่าย กับแนวคิดในการใช้งาน Angular Framework เวอร์ชั่นล่าสุด
2. ใช้ Angular เพื่อพัฒนา Web Application ในฝั่ง Front-end
3. ใช้ Angular และ Ionic Framework ในการพัฒนา iOS และ Android Application แบบ Cross-Platform
4. เรียนรู้การเชื่อมต่อ Web App และ Mobile App ที่สร้างด้วย Angular กับ ASP.NET Web API

พร้อมแล้วมาดูวิธีการติดตั้งกันเลย

1. ติดตั้ง Node.js

ติดตั้ง Node.js โดยให้ดาวน์โหลดโปรแกรมจากเว็บนี้

• ดาวน์โหลดตัวติดตั้ง ต้องดูให้ดี เอาแบบ LTS นะ
• เลือกระบบ 64-bit หรือ 32-bit ให้ตรงกับเครื่องตัวเอง

2. ติดตั้ง Angular CLI

เปิดโปรแกรม Command Windows (สำหรับ Window) หรือ Terminal (สำหรับ MacOS)

และรันคำสั่ง

npm install -g @angular/cli

3. ติดตั้ง Ionic CLI

เปิดโปรแกรม Command Windows (สำหรับ Window) หรือ Terminal (สำหรับ MacOS)

และรันคำสั่ง

npm install -g cordova
npm install -g ionic

4. ติดตั้ง Visual Studio รุ่นล่าสุด

ให้ดาวน์โหลดตัวติดตั้งโปรแกรม Visual Studio รุ่นล่าสุด (อย่างตอนนี้ของโค้ชพลเป็นรุ่น 2017) มาติดตั้งให้เรียบร้อย

ตอนติดตั้งให้เลือก Workload ชื่อ

• ASP.NET and web development

5. ติดตั้ง Visual Studio Code

ดาวน์โหลดตัวติดตั้งโปรแกรม Visual Studio Code มาจากที่นี่ และติดตั้งให้เรียบร้อย

จากนั้นติดตั้ง Extension ตามรายชื่อนี้

เทคนิค: ติดตั้งให้ครบ แล้วค่อยกด Reload ทีเดียวก็ได้

1. Angular v4 TypeScript Snippets ของ John Papa
2. Auto Import ของ steoates
3. AutoFileName ของ Jerry Hong
4. gi ของ RubberSheep
5. Ionic 2 snippets ของ oudZy
6. JavaScript Snippet ของ Mahmoud Ali
7. Path Intellisense ของ Christian Kohler
8. Prettier ของ Esban Petersan
9. Rainbow Brackets ของ 2gua
10. TypeScript Toolbox ของ DSKWRK
11. vscode-icons ของ Roberto Huertas

6. ติดตั้ง Android SDK และ iOS SDK ตามเครื่องที่จะใช้

เลือกเส้นทางของพวกเรา ตามเครื่องคอมพิวเตอร์ที่จะใช้

1. ถ้าเครื่องที่ใช้เป็น Windows ให้ติดตั้งโปรแกรมเพิ่มเติม สำหรับแอพ Android ตามนี้
2. ถ้าเครื่องที่ใช้เป็น MacOS
   1. และต้องการทดสอบ Android Application บนอุปกรณ์จริง ให้ติดตั้งโปรแกรมเพิ่มเติมตามนี้
   2. และต้องการทดสอบ iOS Application บนอุปกรณ์จริง ให้ติดตั้งโปรแกรมเพิ่มเติมตามนี้