App แรกกับ Ionic Framework



หลังจากเราติดตั้ง ionic framework เรียบร้อยแล้ว เรามาทำการสร้างแอพแรกกันครับ

การสร้างโปรเจคใหม่มีด้วยกัน 3 รูปแบบคือ
  • Template แบบว่างเปล่า คือไม่มีอะไรเลยตามรูปด้านบน (ซ้ายมือ)
  • Template แบบ Tabs อันนี้จะเป็นค่าเริ่มต้นหากเราไม่ระบุ template ที่เราจะใช้สร้างโปรเจค
  • Template แบบ sidemenu (หรือใน Android เรียกว่า DrawerLayou)

คำสั่งที่ใช้สร้างโปรเจค

  $ ionic start <ชื่อโปรเจค> (tabs|blank|sidemenu)
ชื่อโปรเจค คือชื่อโฟลเดอร์ที่จะถูกสร้างครับ
(tabs|blank|sidemenu) หากไม่ระบุจะหมายถึง tabs ครับ

ตัวอย่างคำสั่งสร้างโปรเจค

  $ ionic start myApp tabs
คำสั่งด้านบน จะสร้างโฟลเดอร์ชื่อ myApp ขึ้น ณ โฟลเดอร์ที่เราพิมพ์คำสั่ง โดยใช้ template แบบ tabs ครับ

ให้เราเข้าไปในโฟลเดอร์ด้วยคำสั่ง

$ cd myApp

หลังจากนั้น หากเราสามารถทดสอบสามารถใช้คำสั่ง

$ ionic serve
คำสั่งด้านบนจะรัน web server ในโปรเจคที่เรียก โดยจะเรียกไฟล์ที่อยู่ในโฟลเดอร์ www ในโปรเจค myApp ครับ และคำสั่งนี้จะเปิด browser ให้โดยอัตโนมัติ ผมแนะนำให้ใช้ Chrome ครับ ท่านจะสามารถใช้ Developer Tools ได้ง่าย นอกจากนี้ Browser mobile ส่วนใหญ่ยังใช้ Webkit Engine ทำให้การแสดงผลค่อนข้างจะเหมือนกันครับ หากเราใช้ Developer tools เปิด simulate mobile device เราก็จะเห็นหน้าตาที่จะปรากฏบนมือถือรุ่นต่างๆ ได้ทันทีเลยครับโดยไม่จำเป็นต้องรัน Emulator เลย

ทดสอบแอพบน Emulator

หลังจากเราเข้าไปยังโฟลเดอร์แอพแล้วให้เราพิมพ์คำสั่งตามด้านล่างเลยครับ

$ ionic platform add android
$ ionic build android
$ ionic emulate android
คำสั่งด้านบนจะเป็นคำสั่ง Alias ไปยัง PhoneGap หรือ Cordova อีกทีครับ เป็นการบอกว่าเราต้องการต้องให้ Cordova สร้างแอพสำหรับ Platform อะไรบ้างครับ ในที่นี่ผมให้สร้าง Android

คำสั่งถัดมาให้ Cordova build โปรเจคให้ครับ

คำสั่งถัดมาก็ให้รันโปรเจคที่ build เสร็จแล้ว บน Android emulator ครับ

หากต้องการรันบน Device จริงๆ ให้ใช้คำสั่งด้านล่างนี้แทนครับ

ionic run android
Seven Seconds Web Developer

Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi aucto.

No comments:

Post a Comment