Posted on Leave a comment

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

Blog Post cover - Ionic run ios app
[us_message color="green" icon="fas|bell"]อัพเดตเนื้อหาเป็นปีล่าสุด 2018 แล้วจ้า[/us_message]

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

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

[us_cta title="คนทำเว็บสู่คนทำแอพ" controls="bottom" btn_link="url:https%3A%2F%2Fnextflow.in.th%2Fionic-framework-ios-android-app-training-workshop%2F|||" btn_label="ดูรายละเอียด"]หลักสูตรปูพื้นฐานด้วยเนื้อหาเข้าใจง่าย, พร้อม Workshop ตัวอย่างจริง, ทบทวน และเรียนรู้เทคนิค Advanced ออนไลน์หลังจบหลักสูตร [/us_cta]

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

  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 ก็ได้)

Add Apple ID to Xcode 2018

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

จากโปรเจค

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

Setting Xcode project an apple id

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

จาก Xcode

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

Xcode select scheme and target device and run

เปิดอบรมสร้าง Cross Platform Mobile Application ด้วย Ionic Framework

เหมาะสำหรับคนทำเว็บ, เริ่มต้น JavaScript ES6 และ Angular เข้าใจง่าย, ใช้ได้จริง

สอบถาม หรือติดต่อจัดอบรมโทร 083-071-3373

โปรหน้าฝน! เรียนรอบสด รับคอร์สออนไลน์มูลค่ากว่า 5800 บาทฟรี!

Loading Facebook Comments ...