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

<h3>เขียนแอพด้วย ionic framework &colon; ตอน 3 สร้าง ionic project<&sol;h3 >&NewLine;<p>1&period; ทดลองสร้าง ionic project กันครับ<br &sol;>&NewLine; สร้าง folder มาครับ ตั้งชื่อว่าอะไรก็ได้ ผมตั้งชื่อว่า ionic<br &sol;>&NewLine; &&num;8211&semi; คลิกขวาที่โฟลเด้อ ionic ไปที่ services->New Terminal at Folder<br &sol;>&NewLine; &&num;8211&semi; พิมพ์คำสั่ง <&sol;p>&NewLine;<pre class&equals;"theme&colon;dark-terminal lang&colon;default decode&colon;true " >&dollar; ionic start HelloWorldApp sidemenu<&sol;pre>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;ติดตั้ง-ionic-framework-4&period;png" alt&equals;"ติดตั้ง ionic framework" &sol;><&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>ตัว ionic framework จะมี templates ให้เลือกใช้งาน 3 แบบด้วย คือ<br &sol;>&NewLine; &&num;8211&semi; blank คือ เริ่มโปรเจคแบบไม่มีอะไรให้เลย templates เปล่า ๆ นั่นเอง<br &sol;>&NewLine; &&num;8211&semi; tabs คือ เริ่มโปรเจคแบบมี tab bar มาให้เลย<br &sol;>&NewLine; &&num;8211&semi; sidemenu คือ เริ่มโปรเจคแบบมีเมนูบาร์มาให้ เหมือน drawer menu ใน java ครับ<&sol;p>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;ติดตั้ง-ionic-framework-5&period;png" alt&equals;"ติดตั้ง ionic framework" &sol;><&sol;p>&NewLine;<p>ในที่นี้ผมเลือกแบบ sidemenu รอ ionic สร้างโปรเจคซักพัก เสร็จแล้วก็จะได้ไฟล์ข้อมูลดังรูปครับ<&sol;p>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;ติดตั้ง-ionic-framework-7&period;png" alt&equals;"ติดตั้ง ionic framework" &sol;><&sol;p>&NewLine;<p>2&period; ทดสอบดูครับถ้า ionic project ทำงานได้ พิมพ์<&sol;p>&NewLine;<pre class&equals;"theme&colon;dark-terminal lang&colon;default decode&colon;true " >&dollar; ionic serve<&sol;pre>&NewLine;<p> ต่อด้วยพิมพ์ localhost ถ้าทุกอย่างปกติดี บราวเซอร์จะเปิดโปรเจคของเราขึ้นมาครับ<&sol;p>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;ติดตั้ง-ionic-framework-9&period;png" alt&equals;"ติดตั้ง ionic framework" &sol;><br &sol;>&NewLine;<img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;ติดตั้ง-ionic-framework-10&period;png" alt&equals;"ติดตั้ง ionic framework" &sol;><&sol;p>&NewLine;<p>3&period; เสร็จแล้วทำการ build Xcode project ด้วยคำสั่ง<&sol;p>&NewLine;<pre class&equals;"theme&colon;dark-terminal lang&colon;default decode&colon;true " >&dollar; sudo ionic build iOS<&sol;pre>&NewLine;<p> ถ้าทุกอย่างเป็นปกติดีเราจะได้ xcode project มาตามภาพครับ<&sol;p>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;ติดตั้ง-ionic-framework-11&period;png" alt&equals;"ติดตั้ง ionic framework" &sol;><&sol;p>&NewLine;<p>4&period; Double Click โปรเจคเปิด Xcode เลยครับ ทดสอบจาก simulator ของ xcode ได้เลย<br &sol;>&NewLine; แค่นี้เราก็สามารถทดสอบการทำงานของ ionic project หรือ export &period;ipa ได้แล้วครับ<&sol;p>&NewLine;<p> <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;ติดตั้ง-ionic-framework-12&period;png" alt&equals;"ติดตั้ง ionic framework" &sol;><br &sol;>&NewLine; <img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2015&sol;12&sol;ติดตั้ง-ionic-framework-14&period;png" alt&equals;"ติดตั้ง ionic framework" &sol;><&sol;p>&NewLine;