เชี่ยวชาญ Cordova iOS Development: จาก Setup ถึง Deployment ที่ราบรื่น

การพัฒนา Hybrid Application สำหรับ Android เป็นเรื่องง่าย ไม่ว่าจะเป็นการพัฒนาหรือ Configuration สำหรับ Production แต่ส่วนตัวผมพบว่า Cordova iOS Setup, Development และ Deployment ค่อนข้างซับซ้อน

นักพัฒนา Hybrid Application หลายคนที่อยู่ในช่วงเรียนรู้ ไม่ได้สำรวจกระบวนการพัฒนา Hybrid iOS App เพราะไม่ได้มี Mac และการพัฒนา iOS Apps ต้องการ iOS SDK และ Xcode (ต่างจาก Android SDK ที่รันบน Desktop OS ใดๆ ก็ได้)

ดังนั้นเป้าหมายของคู่มือนี้คือแสดง Workflow พื้นฐานของ Hybrid iOS App Development บน Mac เพื่อให้นักพัฒนาเห็นวิธีการทำแม้จะไม่สามารถพัฒนาแอปได้ด้วยตัวเอง

สร้าง Cordova Project

เริ่มต้นด้วยการเปิด Terminal และสร้าง Cordova Project ใหม่ (ใช้ sudo กรณีมีปัญหาสิทธิ์ เช่น EACCESS Errors):

sudo cordova create iosdemo
cd iosdemo
sudo cordova platform add ios

ขณะเขียนคู่มือนี้ Cordova iOS Platform Version คือ 4.3.1

เราจะไม่แก้ไข Source Code ของแอป — จะใช้ Sample Code เริ่มต้นที่ Cordova เพิ่มอัตโนมัติเมื่อรันคำสั่ง Create อย่างไรก็ตาม สมมติว่าเราจะเพิ่ม Plugins และแก้ไขโค้ดในโฟลเดอร์ www ระหว่าง Development Flow ปกติ

ขั้นตอนต่อไปคือรันคำสั่ง Cordova Build จะแปลงโค้ดแอปเป็นไฟล์ .xcodeproj ซึ่งเราจะใช้ต่อไป

sudo cordova build ios

ไฟล์ Xcode Project ที่สร้างขึ้นจะอยู่ที่:

[Your App Folder]/platforms/ios/[Your App Name].xcodeproj

ในกรณีของ Android การ Sign Code ทำด้วย Keystore File รูปแบบ .jks แต่ใน iOS จำเป็นต้องมี Apple Developer Account เพื่อแจกจ่าย iOS Apps เพื่อที่จะสร้าง Certificates และ Provisioning Profiles ที่จำเป็นสำหรับการแจกจ่ายแอป

สำหรับราคาและข้อมูลอื่นๆ เกี่ยวกับ Developer Account อ้างอิงหน้านี้

สร้าง Development Certificates

เมื่อพร้อม Account แล้ว สามารถ Login เข้า Apple Developer Account ได้

หน้า Dashboard ควรจะประมาณนี้:

คลิกที่ Certificates, Identifiers & Profiles จะนำไปหน้าต่อไปซึ่งแสดง Certificates ที่ออกจาก Account ของคุณโดย Default:

iOS Certificates หลักมี 2 ประเภท: Development หรือ Distribution คลิกปุ่ม Plus (+) มุมขวาบนของ List จะเปิดหน้าต่อไป:

ก่อนอื่นสร้าง Development Profile เลือก iOS App Development และคลิก Continue

จะไปหน้าที่ขอให้สร้างและ Upload Certificate Signing Request (CSR) File:

ทำตามคำแนะบนหน้าจอเพื่อสร้าง CSR และ Continue เมื่อ Certificate พร้อม ให้ Download มาที่ Mac และ Double-click จะเพิ่มเข้า Keychain Access ใน Mac

สร้าง Distribution Certificates

การสร้าง Distribution Certificates คล้ายกับ Development Certificates แต่ที่นี่เลือก App Store and Ad Hoc จาก Section Production ใน Add iOS Certificate Page:

สร้าง App ID

เลือก App IDs จาก Section Identifiers จะเปิดรายการ App IDs ที่มีอยู่ คลิกปุ่ม Plus ด้านขวาบน (+) จะเปิดหน้า Register iOS App IDs

เลือก Explicit App ID App Description ใส่ชื่อที่เกี่ยวข้องได้ — นี่คือชื่อที่จะแสดงใน App ID List ต่อ App ID นั้น

App ID เป็น String รูปแบบ AB11A1ABCD.com.mycompany.myapp โดย AB11A1ABCD คือ App ID Prefix ซึ่งเป็น Team ID โดย Default และ com.mycompany.myapp คือ Bundle ID ที่ Unique ต่อแต่ละแอป

แนะนำให้ Bundle ID เป็น Reverse-Domain Name Style String เช่น บริษัท MYCOMPANY มี 2 แอป (App1 และ App2) HTTP URL ปกติคือ app1.mycompany.com และ app2.mycompany.com ดังนั้น Bundle IDs จะเป็น com.mycompany.app1 และ com.mycompany.app2

ต่อไปเลือก Services จาก Checklist ที่ต้องการใช้ในแอป เช่น Push Notifications, Wallet ฯลฯ คลิก Continue ยืนยันรายละเอียด และ Register App ID

เพิ่มอุปกรณ์ใน Developer Account

เลือก All จาก Section Devices จะแสดงรายการอุปกรณ์ที่เพิ่มไว้ใน Apple Developer Account เฉพาะอุปกรณ์เหล่านี้เท่านั้นที่อนุญาตให้รันแอประหว่าง Development

เพิ่มอุปกรณ์ใหม่ คลิกปุ่ม Plus มุมขวาบน (+) จะแสดงหน้าต่อไป:

Name ใส่ชื่อเข้าใจง่าย เช่น iPhone 5s ABC Pvt Ltd Device UDID คือ Unique ID ของแต่ละอุปกรณ์ Apple

วิธีหา UDID:

1. ต่ออุปกรณ์กับ Mac
2. เปิด System Information App ใน /Applications/Utilities
3. เลือก USB Under Hardware ด้านซ้าย
4. ด้านขวา เลือกอุปกรณ์ที่ต่ออยู่ Under USB Device Tree Device ID หรือ "Serial Number" จะแสดงด้านล่าง

กรอก UDID และ Name แล้ว Continue ยืนยันและ Register

สร้าง Development Provisioning Profile

คลิก Provisioning Profiles -> All จะแสดง Profiles ทั้ง Development และ Distribution คลิก Plus มุมขวาบน (+) จะแสดงหน้าต่อไป:

เลือก iOS App Development คลิก Continue ใน Dropdown ที่แสดง ให้เลือก App ID ที่สร้างไว้ก่อนหน้า และ Continue

ต่อมา Checklist ของ Certificates แสดง เลือก 1 หรือหลายตัว นี่คือ Development Certificates ไม่ใช่ Distribution Provisioning Profile ที่สร้างจะ Link กับ Certificates เหล่านี้

คลิก Continue Checklist ของ Devices แสดง เลือก 1, หลาย, หรือ All เฉพาะอุปกรณ์ที่เลือกเท่านั้นที่จะรันแอปด้วย Provisioning Profile นี้ได้

คลิก Continue ใส่ชื่อ Provisioning Profile และ Download ไฟล์ .mobileprovision ที่สร้างขึ้น

หมายเหตุ: การสร้าง Ad Hoc Distribution Provisioning Profile เป็นกระบวนการเดียวกัน การสร้าง App Store Distribution Provisioning Profile คล้ายกันมาก แต่ไม่ต้องเลือก Devices เพราะแอปจะพร้อมใช้งานสาธารณะผ่าน App Store

ตอนนี้เรามีทุกอย่างที่ต้องการแล้ว สามารถต่อไปสร้างไฟล์ IPA จริงด้วย Xcode

Cordova Build Command แปลงโค้ดแอปเป็น Xcode Project ใช้ Xcode สร้าง .ipa File ซึ่งเป็นไฟล์แอปจริงสำหรับติดตั้ง

ก่อนไปต่อ Double-tap ทั้ง 2 Certificates เพื่อเพิ่มเข้า Keychain

ต่อไปใน Xcode

Double-tap ไฟล์ .xcodeproj จะเปิดใน Xcode (ใช้ Xcode เวอร์ชันล่าสุด — ผมใช้ Xcode 8.3.2)

หน้าจอ Xcode ควรจะประมาณนี้

คลิก App Name มุมซ้ายบนของหน้าต่าง จะเปิด Detailed View ด้านขวา

คลิก Targets -> App Name:

จะแสดง Details Tab:

คลิก General จะแสดง:

Uncheck Automatically Manage Signing Checkbox

จะแสดง Error ว่า AppName ต้องการ Provisioning Profile:

ต่อไป Under Signing (Debug) คลิก Provisioning Profile Dropdown เลือก Import Profile ใน Dialog เลือกไฟล์ ให้ไปที่ Path ที่ Download Development Provisioning Profile ไว้ และเลือก มันจะมี Extension .mobileprovision

หลังเลือกแล้ว Error ควรหาย และจะแสดง Team เป็น Team Name ใน Apple Developer Account และ Signing Certificate Name

ทำซ้ำสำหรับ Signing (Release) Section — แต่ใน Dialog เลือกไฟล์ ให้เลือก Ad Hoc Distribution Profile

ตอนนี้ Code Signing Steps เสร็จแล้ว เราสามารถ:

• รันแอปบนอุปกรณ์จริง
• รันแอปบน Simulator
• Generate IPA File สำหรับ Distribution
• Upload แอปขึ้น App Store

รันแอปบนอุปกรณ์จริง

ต่ออุปกรณ์กับ Mac ผ่าน USB ในมุมซ้ายบนในรายการอุปกรณ์ ให้เลือกอุปกรณ์ที่ต่ออยู่ และกดปุ่ม Run/Play (สามเหลี่ยมสีดำ):

Build Status จะแสดงใน Status Bar บนหน้าต่าง หาก הכל เรียบร้อย แอปจะติดตั้งบนอุปกรณ์ และโหลดอัตโนมัติในไม่ช้า

หมายเหตุ: ขั้นตอนเหมือนกันสำหรับ Simulator แต่ใช้ iPhone/iPad Simulators จาก Device List แทน

Generate IPA File สำหรับ Distribution

วิธีนี้ใช้เมื่อต้องการแจกจ่ายแอปให้ทีมทดสอบ ฯลฯ อย่างไรก็ตาม อุปกรณ์ของพวกเขาต้องมี UDID อยู่ใน Provisioning Profile

จาก Xcode Menu เลือก Product -> Clean แล้ว Product -> Archive Archives Organizer จะปรากฏและแสดง Archive ใหม่

ใน Panel ด้านขวา เลือก Export Option จะแสดงรายการตัวเลือก

เพื่อแจกจ่ายให้ผู้ใช้ที่มีอุปกรณ์เฉพาะ ให้เลือก "Save for Ad Hoc Deployment" แอปจะถูก Code Sign ด้วย Distribution Certificate

เพื่อแจกจ่ายสำหรับการทดสอบภายใน ให้เลือก "Save for Development Deployment" แอปจะถูก Code Sign ด้วย Development Certificate

ใน Dialog ที่ปรากฏ เลือก Team จาก Popup Menu และคลิก Choose

ต่อมา Device Selection Dialog จะแสดง เลือก All devices หรือ Specific devices และคลิก Next

ต่อมา Review Dialog แสดง จะแสดง Signing Certificate และ Provisioning Profile ที่ใช้ Generate Build Review และคลิก Next สุดท้าย File Save As Popup แสดง เลือก Location ใน File System เพื่อเก็บไฟล์แอปที่ Export

แอปถูก Export เป็นไฟล์ .ipa

รันไฟล์นี้บนอุปกรณ์ Double-tap จะเปิดใน iTunes

ต่ออุปกรณ์ (ควรแสดง Device Icon 小さい มุมซ้ายบนของ iTunes Window) คลิกจะแสดง Device Summary เช่น Apps, Music ฯลฯ บนอุปกรณ์ เลือก Apps Tab ใน Left Pane เลือกแอปที่จะติดตั้งและคลิก Install รอจบกระบวนการและคลิก Apply ควรติดตั้ง IPA File บนอุปกรณ์ได้

Debug แอป:

1. เปิด Safari
2. เปิดแอปบนอุปกรณ์
3. ใน Safari Menu Bar เลือก Develop -> Your Device Name -> Your App

That's all folks!

เรียนรู้เขียนโค้ดฟรี หลักสูตรโอเพนซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานเป็นนักพัฒนา เริ่มต้นได้เลย