ionic 4 พื้นฐาน

วันนี้ผมก็จะขอแชร์ประสบการณ์ในการเริ่มตั้งต้นเรียนรู้ ionic framework ซึ่งเป็นเครื่องมือที่ดี ก่อนผมจะเริ่มได้ก็ใช้เวลาเยอะพอสมควรเพราะการที่เป็น framework เราจะต้องเรียนรู้ทำความเข้าใจกับตัว framework ก่อนที่จะเริ่มใช้งานเขียนโปรแกรม ทำความเข้าใจโครงสร้างและองค์ประกอบต่างๆ พื้นฐาน เข้าใจคอนเซ็บของ framework จากนั้นถึงจะเริ่มลงมือเขียนโค้ดลุยกันได้เลยครับ

ก่อนอื่นก็ทำการติดตั้งเครื่องมือต่างๆให้ครบ

1. Install node.js -> https://nodejs.org/en/download/
2. Install the Ionic CLI -> $npm install -g ionic
3. Start an App -> $ionic start myApp sidemenu
4. Run the App -> $cd myApp
5. Run the App -> $ionic serve

ถัดมาจะอธิบายโครงสร้างของ directory และไฟล์ที่สำคัญ

โครงสร้าง directrory ของ ionic 3 ซ้าย ionic 4 ขวา

app.module.ts ไฟล์นี้ใช้ประกาศ providers ต่างๆที่เราติดตั้งเช่นพวก Camera,FileTransfer,HTTP ต้องประกาศในหน้านี้ก่อนเสมอแล้วเรียกใช้ใน page ต่างๆ

app-routing.module.ts ไฟล์นี้เป็นการกำหนด routing ของ PageModule สำหรับเข้าถึง Page ต่างๆที่เราสร้างขึ้น

app.component.ts ไฟล์นี้ใช้สำหรับ เพิ่ม/แก้ไข เมนู sidemenu

config.xml ไฟล์นี้สำหรับกำหนดรายละเอียดต่างๆของ app ที่เราจะ build project ออกเป็น android app ชื่อ app ,version ต่างๆ ข้อมูลการติดต่อ

package.json ไฟล์นี้จะเก็บรายละเอียด plugin ต่างที่เราติดตั้ง หากใช้คำสั่ง npm install ก็จะติดตั้ง plugin ต่างๆตามไฟล์ package.json