Ionic framework มันคือเครื่องมือที่ใช้ภาษา
HTML,
CSS และ
JavaScript เพื่อใช้ในการสร้าง Mobile Application ซึ่งสามารถใช้งานได้ค่อนข้างง่าย และยังมีการใช้ Command-line interface เข้ามาช่วยในการจัดการส่วนต่าง ๆ ของแอพ เช่นการสร้างหน้าใหม่ หรือการเข้ามาช่วยด้านการติดตั้งให้ง่ายขึ้นได้อีกด้วยซึ่ง ionic framework เป็นเครื่องมือสร้างแอพมือถือที่สามารถสร้างที่เดียวใช้งานได้หลายระบบปฏิบัติการ ทั้งระบบปฏิบัติการ Windows ระบบปฏิบัติการ Android และระบบปฏิบัติการ IOS ซึ่งสมารถใช้งานร่วมกับ Framework อื่น ๆ ด้วย เช่น Angular, Vue, React
ขั้นตอนการสร้างโปรเจคเริ่มเลย!!
- สร้างโฟลเดอร์ที่เก็บโปรเจคของเราในส่วนของตรงนี้ผมจะสร้างโฟลเดอร์ชื่อว่า testapp ไว้เก็บโปรเจค ionic
- โฟลเดอร์เก็บโปรเจค ionic
- testapp.png (2.54 KiB) Viewed 848 times
- เปิด CMD ขึ้นมาโดยมีวิธีเปิดอยู่ 2 วิธี
- Windows+R และพิมพ์ CMD
- เปิดCmdด้วยwindows+run
- Win_run_cmd.png (7.95 KiB) Viewed 848 times
- เปิดโฟลเดอร์ที่เราเก็บโปรเจคแล้ว คลิกขวาเลือก Open in Terminal
- เปิดCmdผ่านโฟลเดอร์
- cmd_2.jpg (45.4 KiB) Viewed 848 times
- สำหรับใครที่เปิดผ่าน Windows+R ให้เข้า Path วิธีทำให้ทำดังนี้
- Copy Path ในโฟลเดอร์ที่เราสร้าง
- Copy Path จากไฟล์ที่เราสร้าง
- copy_path.png (12.07 KiB) Viewed 848 times
- ไปไว้ที่ CMD ที่เราเปิดโดยพิมพ์ cd C:\Users\MONO\Desktop\testapp (ให้แก้เป็นที่อยู่ไฟล์ของแต่ละคน)
- เข้าpathในcmd
- เข้าpathในcmd.png (11.58 KiB) Viewed 848 times
- เริ่มสร้างโปรเจคกันเลย ให้ทุกคนพิมพ์ ionic start myapp
- เริ่มต้นสร้างแอพ
- start.png (25.19 KiB) Viewed 848 times
- เลือก Framework ที่เราจะใช้อันนี้ผมจะใช้เป็น Angular นะคับ
- เลือกFramework
- เลือกFramework.png (35.19 KiB) Viewed 848 times
- template ผมจะเลือกเป็น tabs นะคับจากนั้นระบบก็จะเริ่มทำงานสร้างโปรเจคให้เรารอสักครู่
- สร้างโปรเจคเสร็จสิ้น
- CreateIonicapp.jpg (82.27 KiB) Viewed 848 times
เท่านี้ก็สร้างโปรเจคเสร็จสิ้นแล้ว
- Runดูโปรเจคของเรากัน ให้พิมพ์ cd ตัวด้วยชื่อโปรเจคที่เราตั้ง
- เข้าโปรเจคionicที่เราสร้าง
- เข้าโปรเจค.png (4.49 KiB) Viewed 848 times
- พิมพ์ ionic serve
- runโปรเจค
- ionic_serve.jpg (74.31 KiB) Viewed 848 times
- เท่านี้เราก็ได้ โปรเจคของเราแล้ว
- โปรเจค
- ionic_app.png (20.34 KiB) Viewed 848 times
สรุป การสร้างโปรเจค Ionic framework ไม่ยากอย่างที่คิดใช่ไหมละอย่างแรกให้เราสร้างไฟล์ที่จะเก็บโปรเจคของเราและตามด้วยเปิด cmd ใช้คำสั่ง ionic start ตามด้วยชื่อโปรเจค เลือก framework ที่จะใช้ และเลือก template ที่เราต้องการเมื่อสร้างเสร็จแล้วให้เรา Run ตัวโปรเจคของเราขึ้นมา แค่นี้ก็เสร็จเรียบร้อย สำหรับใครที่ยังไม่เคยลง ionic สามารถดูได้ในนี้เลย
ionic Framework: การติดตั้งเบื้องต้น และหากถ้าใครสนใจตัวอื่นอย่างเช่น Flutter ก็สามารถดูได้จากที่นี้เลย
วิธีติดตั้ง Flutter (ฟลัทเตอร์) สำหรับเขียนแอปบนมือถือ Moblie App
อ้างอิง
https://www.codebee.co.th/labs/%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B9%81%E0%B8%AD%E0%B8%9E%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-ionic-framework-%E0%B8%95%E0%B8%AD%E0%B8%99-3-%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2/
https://nextflow.in.th/2015/create-mobile-app-project-with-ionic-framework/
https://ionicframework.com/docs/intro/cli