Ionic: วิธีเพิ่ม Capacitor เข้าไปในโปรเจค Ionic เดิมที่ใช้ Cordova อยู่แล้ว

หลังจากที่ทีมงาน Ionic รอการพัฒนาของ Cordova ไม่ไหว เลยสร้าง Runtime ของตัวเองออกมาเพื่อจัดการและดูแลเอง จนมาเป็น Capacitor ที่โค้ชพลพูดถึงหลายครั้งอยู่

ก็มีคำถามว่า ถ้าเกิดเราอยากเอาโปรเจคเดิมของ Ionic ที่ใช้อยู่มา export โดยใช้ขุมพลังของ Capacitor จะทำได้ไหม?

ทำได้ครับ

มาลองกันเลย

1. ทำการ integrate capacitor

อย่างแรกให้เปิด Terminal หรือ Powershell ขึ้นมาในโฟลเดอร์โปรเจคของเรา และสั่งคำสั่งด้านล่างนี้

ionic integrations enable capacitor

2. สร้างโปรไฟล์ที่ใช้กับ Capacitor​ โดยเฉพาะ

ในคอร์สออนไลน์ เราเรียนรู้เกี่ยวกับ config.xml แล้ว แต่กับ Capacitor จะมีไฟล์สำหรับ config โดยเฉพาะ ชื่อ capacitor.config.json

เราสามารถสร้างไฟล์นี้ขึ้นมาได้โดยการรันคำสั่งด้านล่าง

npx cap init [appName] [appId]

ให้แทนชื่อแอพ และ App Id ลงไปในคำสั่งตามลำดับนะครับ เช่น

npx cap init NextflowApp th.in.nextflow.nextflowapp

3. รัน build

รันคำสั่ง build นี้ไม่ใช่ build ใน iOS และ Android นะครับ แต่เป็นการสั่งให้ ionic build โปรเจคตัวเอง พร้อมส่งลง platform iOS และ Android ต่างหาก

รัน 1 ครั้งสำหรับครั้งแรก และรันก่อน sync โค้ดลง platform ต่างๆ นะครับ

ionic build

4. เพิ่มโปรเจค Native Android และ iOS

จากนั้นใช้คำสั่งด้านล่างเพื่อเพิ่มโปรเจค iOS และ Android ครับ (iOS ได้เฉพาะบนระบบ mac เท่านั้นนะ)

npx cap add ios
npx cap add android

5. รันโปรเจคผ่าน IDE

ความแตกต่างที่ค่อนข้างชัดเจนระหว่าง Capacitor และ Cordova ก็คือวิธีการรัน ที่เราสามารถรันผ่าน IDE ของแต่ละ platform ได้โดยตรง

ใช้คำสั่งด้านล่างเปิด Android Studio และ Xcode ขึ้นมาตามลำดับครับ

npx cap open android
npx cap open ios

ติดตามเรื่องใหม่ๆ เกี่ยวกับ Ionic Capacitor ได้ตามช่องทางด้านล่างครับ

• ติดตามจากแฟนเพจ Nextflow
• กดติดตามคลิปใหม่ๆ  Subscribe YouTube Channel ของพลได้เลย
• โทรติดต่อบริการจัดอบรม 083-071-3373 คลิกโทรผ่านมือถือได้เลย
• สอบถามผ่านทาง LINE คลิก
• สอบถามผ่านทาง Facebook คลิก

และถ้าสนใจเรียนสด เรียนออนไลน์กับโค้ชพลได้นะ

อ้างอิง – Capacitor Documentation