วิธีเตรียมเครื่อง Mac เพื่อพัฒนาแอพ iOS ด้วย Ionic Framework 5 และ Angular ฉบับง่ายๆ

อัพเดตเนื้อหาเป็นปี 2020 แล้วจ้า ในคอร์สออนไลน์ก็เรียบร้อยแล้ว

บทความนี้เป็นส่วนหนึ่งของหลักสูตร “สร้าง Mobile App ด้วย HTML 5, Angular, และ Ionic Framework” จะได้เป็นพื้นฐาน และให้ทุกคนสามารถทบทวนกันได้

สำหรับใครที่จะเตรียมเครื่อง Mac ไว้ทำ Android Application ให้ไปดูที่นี่

สิ่งที่ควรรู้

• การจะทดสอบแอพ iOS บน iPhone หรือ iPad ต้องมีการสมัคร iOS Developer Program, ชำระเงิน ($99), และยืนยันให้เรียบร้อย ไม่งั้น Apple จะไม่อนุญาติให้เรารันแอพบนอุปกรณ์ของเราได้

วิดีโอแนะนำการติดตั้ง

ตอนที่ 1: ติดตั้ง Node JS

• ดาวน์โหลด Node JS แนะนำให้ดาวน์โหลดแบบ LTS: Recommended for Most Users

ตอนที่ 2: ติดตั้ง Ionic Framework

คำสั่งติดตั้ง Cordova และ Ionic

sudo npm install -g cordova
sudo npm install -g @ionic/cli

ตอนที่ 3: ติดตั้ง Xcode และ Development Tools

ขั้นตอนและ Link ที่เกี่ยวข้องใน Video

1. Download โปรแกรม XCode มาติดตั้งจาก Mac App Store โดยค้นหา “XCode” หรือคลิกที่ลิ้งค์นี้ และกดปุ่ม “View on Mac App Store”
2. ติดตั้ง XCode Command Line Tool
   • สำหรับคนที่ใช้ XCode เวอร์ชั่น 5.0 ขึ้นไป (ซึ่งผมคิดว่าคงอัพกันหมดแล้วนะ) ต้อง Download จาก https://developer.apple.com/downloads โดยค้นหาคำว่า “command line” แล้ว Download มาติดตั้ง
   • สำหรับคนที่ใช้ XCode ตำ่กว่าเวอร์ชั่น 5.0 ลงมาให้ไปที่ Menu XCode > Preferences และดูแท็บที่ชื่อ Download จะมีปุ่มให้กดติดตั้ง Command Line Tools กด แล้วปล่อยให้มัน download มาติดตั้งครับ

ตอนที่ 4: ติดตั้ง ios-deploy และ ios-sim

เพื่อให้เราสามารถสั่งให้แอพทำงานได้จากโปรแกรม Terminal ทั้งบนอุปกรณ์จริง และ Simulator เราจะติดตั้งระบบที่เรียกว่า ios-deploy  และ ios-sim

เปิดโปรแกรม Terminal ขึ้นมา

ให้พิมพ์คำสั่งด้านล่าง และกด enter ซึ่งจะมีการถามรหัสผู้ดูแล ให้กรอก (รหัสจะไม่ปรากฎบนหน้าจอ) และกด enter

sudo npm install -g ios-deploy; npm install -g ios-sim;

ถ้าเป็น OS X El Capitan ให้ติดตั้ง ios-deploy  ด้วยคำสั่งต่อไปนี้ครับ

sudo npm install -g ios-deploy --unsafe-perm=true --allow-root

โปรแกรม Terminal จะเริ่มดาวน์โหลด และติดตั้งระบบทั้ง 2 ตัว เราแค่ปล่อยทิ้งไว้จนมันติดตั้งเสร็จสมบูรณ์ครับ

สรุป

เมื่อมาถึงจุดนี้ ถือว่าเครื่อง Mac OS X ของเราพร้อมจะพัฒนาแอพ iOS ด้วย HTML 5, PhoneGap, Angular JS, และ Ionic Framework แล้วครับ มีคำถามสงสัย สามารถสอบถามได้ทางแฟนเพจของผมที่นี่

แล้วถ้าสนใจมาอบรม Workshop กับผมได้ตามรายละเอียดด้านล่างครับ