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

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

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

ติดตั้ง ionic framework

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

ติดตั้ง ionic framework

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

ติดตั้ง ionic framework

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

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

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

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

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

ติดตั้ง ionic framework

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

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

กระทู้ใกล้เคียง

เขียนแอพด้วย ionic framework : ตอน 2 ติดตั้ง cordo... เขียนแอพด้วย ionic framework : ตอน 2 ติดตั้ง cordova และ ionic framework 1. ดูคำสั่งการติดตั้ง ionic framework ได้ที่เว็บหลักของเขาได้เลยครับ http:...
เขียนแอพด้วย ionic framework : ตอน 1 ติดตั้ง Node.... เขียนแอพด้วย ionic framework : ตอน 1 ติดตั้ง Node.js 1. ดาวน์โหลดตัวติดตั้ง npm ( node package manager ) ที่เว็บ https://nodejs.org เลือกตัว...
ไอเดียทำ Mobile Apps ด้วยการประยุกต์ใช้เทคโนโลยี B... ไอเดียทำ Mobile Apps ด้วยการประยุกต์ใช้เทคโนโลยี Beacon ไอเดียทำ Mobile Apps ด้วยการประยุกต์ใช้เทคโนโลยี Beacon Beacons ( บีคอน ) คืออุปกรณ์ขนาด...
ทำแอปใน iOS ตัวเลขขนาดหน้าจอแบบ Inch และ Pixel... ทำแอปใน iOS ตัวเลขขนาดหน้าจอแบบ Inch และ Pixel ทำแอปใน iOS ตัวเลขขนาดหน้าจอแบบ Inch และ Pixel ในการพัฒนา mobile application ในระบบปฏิบัติการ iOS น...