วิธีทดสอบแอพ Ionic บนอุปกรณ์ iOS จริง

ในการทดสอบแอพพลิเคชั่น Cross Platform ที่สร้างด้วย Ionic บนระบบ iOS นั้น เวลาทดสอบบนเครื่องจริง อาจจะมีขั้นตอนที่ค่อนข้างแหวกแนวจากแบบ Android

ซึ่งโค้ชพลขอมาเขียนแนะนำขั้นตอนง่ายๆ ที่นี่ครับ

ขั้นตอนในการทดสอบ

1. สร้างโปรเจคก่อน
2. กำหนดชื่อ App ID
3. เพิ่ม iOS Platform
4. เพิ่ม Developer Account ใน Xcode
5. กำหนด Account ในส่วน Signing
6. เลือก Scheme และกดรันทดสอบ

เอาล่ะเรามาทำไปทีละขั้นตอนเลย

1. สร้างโปรเจค Ionic

หลังจากติดตั้งระบบบน MacOS แล้ว รันคำสั่งนี้ผ่านโปรแกรม Terminal

ionic start NextflowApp --type=angular

 

2. กำหนดชื่อ App ID

ในโฟลเดอร์ NextflowApp ที่เราสร้างขึ้นมา ให้เราเปิดไฟล์ config.xml ขึ้นมา จะมีส่วนของ <widget>  ที่มี attribute ชื่อ id  ซึ่งเราสามารถกำหนด App ID ได้

<widget id="io.ionic.starter" version="0.0.1" ...>
    <name>...</name>
    ...

การกำหนดส่วนนี้เรียกว่า Reverse Domain Name เป็นการเขียนชื่อโดเมนเว็บไซต์ย้อนจากข้างหลังมาข้างหน้า เช่น

<widget id="th.in.nexztflow.app" version="0.0.1" ...>
    <name>...</name>
    ...

 

3. เพิ่ม iOS Platform

จากนั้นรันคำสั่งจากภายในโฟลเดอร์โปรเจค NextflowApp ที่เพิ่งสร้างขึ้นมา

** แน่นอนว่าเราสามารถเพิ่ม iOS Platform ได้เฉพาะบนระบบ MacOS ที่ติดตั้งโปรแกรมไว้เรียบร้อยแล้วเท่านั้น

cd NextflowApp
ionic cordova platform add ios

 

4. เพิ่ม Developer Account ใน Xcode

ในโฟลเดอร์โปรเจค NextflowApp เราสามารถเกิดโฟลเดอร์ platform/ios ได้ ซึ่งด้านในจะมีไฟล์นามสกุล .xcodeproj อยู่ สามารถดับเบิ้ลคลิกเปิดมันขึ้นมาได้เลย

จากนั้นให้เข้ามาในส่วน Preference > Account เพื่อกดเพิ่ม Apple ID ของเราลงไป (จะเป็น Apple ID แบบปกติ หรือ Developer Account ก็ได้)

5. กำหนด Account ในส่วน Signing

จากโปรเจค

1. จากส่วนของ Project Navigator ให้เลือก ชื่อโปรเจค
2. เช็คในส่วนของ Bundle Identifier ว่าจะตรงกับชื่อ id ที่เราตั้งในไฟล์ config.xml
3. เปิดดูในส่วนของ Signing
4. เลือก Account ในส่วนของ Team

6. เลือก Scheme และกดรันทดสอบ

จาก Xcode

1. ให้เลือกอุปกรณ์พกพา หรือ Simulator ที่ต้องการรันทดสอบ
2. กดปุ่ม Build and Run
3. รันเรียบร้อย