ionic framework เริ่มต้นสร้างโปรเจค

[chakrit]

Ionic framework มันคือเครื่องมือที่ใช้ภาษา HTML, CSS และ JavaScript เพื่อใช้ในการสร้าง Mobile Application ซึ่งสามารถใช้งานได้ค่อนข้างง่าย และยังมีการใช้ Command-line interface เข้ามาช่วยในการจัดการส่วนต่าง ๆ ของแอพ เช่นการสร้างหน้าใหม่ หรือการเข้ามาช่วยด้านการติดตั้งให้ง่ายขึ้นได้อีกด้วยซึ่ง ionic framework เป็นเครื่องมือสร้างแอพมือถือที่สามารถสร้างที่เดียวใช้งานได้หลายระบบปฏิบัติการ ทั้งระบบปฏิบัติการ Windows ระบบปฏิบัติการ Android และระบบปฏิบัติการ IOS ซึ่งสมารถใช้งานร่วมกับ Framework อื่น ๆ ด้วย เช่น Angular, Vue, React

ขั้นตอนการสร้างโปรเจคเริ่มเลย!!

1. สร้างโฟลเดอร์ที่เก็บโปรเจคของเราในส่วนของตรงนี้ผมจะสร้างโฟลเดอร์ชื่อว่า testapp ไว้เก็บโปรเจค ionic

   

   โฟลเดอร์เก็บโปรเจค ionic

   testapp.png (2.54 KiB) Viewed 848 times

2. เปิด 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

3. สำหรับใครที่เปิดผ่าน Windows+R ให้เข้า Path วิธีทำให้ทำดังนี้
   1. Copy Path ในโฟลเดอร์ที่เราสร้าง

      

      Copy Path จากไฟล์ที่เราสร้าง

      copy_path.png (12.07 KiB) Viewed 848 times

   2. ไปไว้ที่ CMD ที่เราเปิดโดยพิมพ์ cd C:\Users\MONO\Desktop\testapp (ให้แก้เป็นที่อยู่ไฟล์ของแต่ละคน)

      

      เข้าpathในcmd

      เข้าpathในcmd.png (11.58 KiB) Viewed 848 times

4. เริ่มสร้างโปรเจคกันเลย ให้ทุกคนพิมพ์ ionic start myapp

   

   เริ่มต้นสร้างแอพ

   start.png (25.19 KiB) Viewed 848 times

5. เลือก Framework ที่เราจะใช้อันนี้ผมจะใช้เป็น Angular นะคับ

   

   เลือกFramework

   เลือกFramework.png (35.19 KiB) Viewed 848 times

6. template ผมจะเลือกเป็น tabs นะคับจากนั้นระบบก็จะเริ่มทำงานสร้างโปรเจคให้เรารอสักครู่

   

   สร้างโปรเจคเสร็จสิ้น

   CreateIonicapp.jpg (82.27 KiB) Viewed 848 times

   เท่านี้ก็สร้างโปรเจคเสร็จสิ้นแล้ว
7. Runดูโปรเจคของเรากัน ให้พิมพ์ cd ตัวด้วยชื่อโปรเจคที่เราตั้ง

   

   เข้าโปรเจคionicที่เราสร้าง

   เข้าโปรเจค.png (4.49 KiB) Viewed 848 times

8. พิมพ์ ionic serve

   

   runโปรเจค

   ionic_serve.jpg (74.31 KiB) Viewed 848 times

9. เท่านี้เราก็ได้ โปรเจคของเราแล้ว

   

   โปรเจค

   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