เขียนแอพด้วย ionic framework : ตอน 3 สร้าง ionic project

เขียนแอพด้วย ionic framework : ตอน 3 สร้าง ionic project

1. ทดลองสร้าง ionic project กันครับ
สร้าง folder มาครับ ตั้งชื่อว่าอะไรก็ได้ ผมตั้งชื่อว่า ionic
– คลิกขวาที่โฟลเด้อ ionic ไปที่ services->New Terminal at Folder
– พิมพ์คำสั่ง

$ ionic start HelloWorldApp sidemenu

ติดตั้ง ionic framework

ตัว ionic framework จะมี templates ให้เลือกใช้งาน 3 แบบด้วย คือ
– blank คือ เริ่มโปรเจคแบบไม่มีอะไรให้เลย templates เปล่า ๆ นั่นเอง
– tabs คือ เริ่มโปรเจคแบบมี tab bar มาให้เลย
– sidemenu คือ เริ่มโปรเจคแบบมีเมนูบาร์มาให้ เหมือน drawer menu ใน java ครับ

ติดตั้ง ionic framework

ในที่นี้ผมเลือกแบบ sidemenu รอ ionic สร้างโปรเจคซักพัก เสร็จแล้วก็จะได้ไฟล์ข้อมูลดังรูปครับ

ติดตั้ง ionic framework

2. ทดสอบดูครับถ้า ionic project ทำงานได้ พิมพ์

$ ionic serve

ต่อด้วยพิมพ์ localhost ถ้าทุกอย่างปกติดี บราวเซอร์จะเปิดโปรเจคของเราขึ้นมาครับ

ติดตั้ง ionic framework
ติดตั้ง ionic framework

3. เสร็จแล้วทำการ build Xcode project ด้วยคำสั่ง

$ sudo ionic build iOS

ถ้าทุกอย่างเป็นปกติดีเราจะได้ xcode project มาตามภาพครับ

ติดตั้ง ionic framework

4. Double Click โปรเจคเปิด Xcode เลยครับ ทดสอบจาก simulator ของ xcode ได้เลย
แค่นี้เราก็สามารถทดสอบการทำงานของ ionic project หรือ export .ipa ได้แล้วครับ

ติดตั้ง ionic framework
ติดตั้ง ionic framework