การพัฒนาแอปพลิเคชันแบบไฮบริดสำหรับ Android เป็นเรื่องง่าย ไม่ว่าจะเป็นการกำหนดค่าการพัฒนาหรือการใช้งานจริง แต่โดยส่วนตัวแล้วฉันพบว่าการตั้งค่า การพัฒนา และการปรับใช้ Cordova iOS มีความซับซ้อนเล็กน้อย
นักพัฒนาแอปพลิเคชันแบบไฮบริดส่วนใหญ่ที่อยู่ในขั้นตอนการเรียนรู้ไม่สามารถสำรวจกระบวนการพัฒนาแอพ iOS แบบไฮบริดได้เพียงเพราะพวกเขาไม่ได้เป็นเจ้าของ Mac และการพัฒนาแอพ iOS ต้องใช้ iOS SDK และ XCode (ไม่เหมือนกับ Android SDK ที่ทำงานบนระบบปฏิบัติการเดสก์ท็อปใดๆ)
ดังนั้น จุดมุ่งหมายของคู่มือนี้คือเพื่อแสดงขั้นตอนการทำงานพื้นฐานของการพัฒนาแอพ iOS แบบไฮบริดบน Mac วิธีนี้ทำให้นักพัฒนาสามารถดูวิธีการทำงานแม้ว่าจะไม่สามารถพัฒนาแอปได้ก็ตาม
การสร้างโครงการคอร์โดวา
เริ่มต้นด้วยการเปิดเทอร์มินัลและสร้างโปรเจ็กต์ Cordova ใหม่ (ใช้ sudo เฉพาะในกรณีที่คุณมีปัญหาในการอนุญาต เช่น ข้อผิดพลาด EACCESS):
sudo cordova create iosdemo
cd iosdemo
sudo cordova platform add ios
ในขณะที่เขียนคู่มือนี้ เวอร์ชันแพลตฟอร์ม Cordova iOS คือ 4.3.1
เราจะไม่แก้ไขซอร์สโค้ดใดๆ ของแอป แต่เราจะดำเนินการต่อด้วยโค้ดตัวอย่างเริ่มต้นที่เพิ่มโดย Cordova โดยอัตโนมัติเมื่อเรารันคำสั่ง create อย่างไรก็ตาม สันนิษฐานว่าเราจะเพิ่มปลั๊กอินแก้ไขโค้ดใน 06 โฟลเดอร์ในระหว่างขั้นตอนการพัฒนาปกติ
ขั้นตอนต่อไปคือการรันคำสั่ง Cordova build สิ่งนี้จะแปลงโค้ดแอปของเราเป็นไฟล์ .xcodeproj ซึ่งเราจะใช้ต่อไป
sudo cordova build ios
ไฟล์โครงการ Xcode ที่สร้างขึ้นจะอยู่ที่นี่:
[Your App Folder]/platforms/ios/[Your App Name].xcodeproj
ในกรณีของ Android การเซ็นโค้ดทำได้โดยใช้ไฟล์ Keystore ซึ่งอยู่ในรูปแบบ .jks อย่างไรก็ตาม ใน iOS คุณจะต้องมีบัญชีนักพัฒนา Apple สำหรับการเผยแพร่แอพ iOS ทั้งนี้เพื่อให้เราสามารถสร้างใบรับรองได้ และ โปรไฟล์การจัดสรร จำเป็นสำหรับการเผยแพร่แอป
สำหรับราคาและข้อมูลอื่น ๆ เกี่ยวกับบัญชีนักพัฒนาโปรดดูที่หน้านี้
การสร้างใบรับรองการพัฒนา
เมื่อคุณมีบัญชีพร้อมแล้ว เราก็สามารถดำเนินการต่อไปและเข้าสู่ระบบบัญชีนักพัฒนา Apple ของคุณได้
หน้าจอแดชบอร์ดควรมีลักษณะดังนี้:
คลิกที่ 14 . สิ่งนี้จะนำคุณไปสู่หน้าจอต่อไปนี้ ซึ่งตามค่าเริ่มต้นจะแสดงใบรับรองที่ออกจากบัญชีของคุณ:
ใบรับรอง iOS แบ่งออกเป็นสองประเภทหลักๆ ได้แก่ การพัฒนาหรือการจัดจำหน่าย คลิกปุ่มบวก (+) ที่มุมขวาบนของรายการซึ่งจะเปิดหน้าต่อไปนี้:
ขั้นแรกเรามาสร้างโปรไฟล์การพัฒนากันก่อน เลือก การพัฒนาแอป iOS และคลิกดำเนินการต่อ
ซึ่งจะนำคุณไปยังหน้าจอต่อไปนี้ ซึ่งระบบจะขอให้คุณสร้างและอัปโหลดคำขอลงนามใบรับรองหรือไฟล์ CSR
ทำตามคำแนะนำบนหน้าจอเพื่อสร้างและดำเนินการต่อ เมื่อใบรับรองพร้อมแล้ว ให้ดาวน์โหลดลงใน Mac ของคุณ แล้วดับเบิลคลิก การดำเนินการนี้จะเพิ่มลงในการเข้าถึงพวงกุญแจใน Mac
การสร้างใบรับรองการจัดจำหน่าย
การสร้างใบรับรองการแจกจ่ายจะคล้ายกับกระบวนการสร้างใบรับรองการพัฒนา อย่างไรก็ตาม ที่นี่เราเลือก 27 จาก 39 ส่วนใน 46 :
การสร้างรหัสแอป
เลือก 56 จาก 63 ส่วน นี่จะเป็นการเปิดรายการรหัสแอปที่มีอยู่ จากนั้นคลิกปุ่มบวกที่ด้านบนขวา (+) การดำเนินการนี้จะเปิดลงทะเบียนรหัสแอป iOS หน้า.
เลือกรหัสแอปที่ชัดเจน คำอธิบายแอปอาจเป็นชื่อที่เกี่ยวข้องก็ได้ - นี่คือสิ่งที่จะแสดงในรายการรหัสแอปเทียบกับรหัสแอปนั้นๆ
รหัสแอปเป็นสตริงในรูปแบบ AB11A1ABCD.com.mycompany.myapp โดยที่ AB11A1ABCD คือคำนำหน้ารหัสแอป ซึ่งโดยค่าเริ่มต้นคือรหัสทีมและ com.mycompany.myapp คือรหัสบันเดิลที่เป็นเอกลักษณ์ของแต่ละแอป
แนะนำว่ารหัสบันเดิลจะต้องอยู่ในสตริงสไตล์ชื่อโดเมนย้อนกลับ ตัวอย่างเช่น บริษัท MYCOMPANY อาจมีสองแอป (App1 และ App2) ดังนั้น HTTP URL สำหรับแต่ละแอปมักจะเป็น app1.mycompany.com และ app2.mycompany.com ดังนั้น ID ชุดสำหรับแต่ละแอปจะเป็น com.mycompany.app1 และ com.mycompany.app2
ถัดไป เลือกบริการใดๆ จากรายการตรวจสอบที่คุณต้องการใช้ในแอปของคุณ เช่น การแจ้งเตือนแบบพุช กระเป๋าเงิน ฯลฯ คลิกถัดไปที่ดำเนินการต่อและยืนยันรายละเอียด และสุดท้ายลงทะเบียนรหัสแอป
การเพิ่มอุปกรณ์ลงในบัญชีนักพัฒนาซอฟต์แวร์ของคุณ
เลือก 71 จาก 86 ส่วน นี่จะเป็นการเปิดรายการอุปกรณ์ที่เพิ่มแล้วในบัญชีนักพัฒนา Apple ของคุณ เฉพาะอุปกรณ์เหล่านี้เท่านั้นที่ได้รับอนุญาตให้เรียกใช้แอประหว่างการพัฒนา
หากต้องการเพิ่มอุปกรณ์ใหม่ ให้คลิกปุ่มบวกที่มุมขวาบน (+) หน้าจอต่อไปนี้จะปรากฏขึ้น:
ชื่อในที่นี้สามารถเป็นชื่อใดก็ได้ที่เข้าใจง่าย เช่น iPhone 5s ABC Pvt Ltd. UDID ของอุปกรณ์คือ ID เฉพาะที่เกี่ยวข้องกับอุปกรณ์ Apple แต่ละเครื่อง
หากต้องการค้นหา UDID ของอุปกรณ์ ให้ทำตามขั้นตอนเหล่านี้:
- เชื่อมต่ออุปกรณ์กับ Mac ของคุณ
- เปิดแอป System Information ที่อยู่ในโฟลเดอร์ /Applications/Utilities
- เลือก USB ใต้ฮาร์ดแวร์ในคอลัมน์ด้านซ้าย
- ทางด้านขวา ให้เลือกอุปกรณ์ที่เชื่อมต่อภายใต้แผนผังอุปกรณ์ USB รหัสอุปกรณ์หรือ “หมายเลขซีเรียล” ปรากฏด้านล่าง
เมื่อคุณเข้าสู่อุปกรณ์ UDID และชื่อแล้ว คลิกดำเนินการต่อ จากนั้นยืนยันรายละเอียดและลงทะเบียน
การสร้างโปรไฟล์การจัดเตรียมการพัฒนา
หากต้องการสร้างโปรไฟล์การจัดเตรียมการพัฒนา ให้คลิกที่โปรไฟล์การจัดเตรียม -> ทั้งหมด นี่ควรแสดงโปรไฟล์ การพัฒนา และการจัดจำหน่ายทั้งหมด คลิกปุ่มบวกที่ด้านบนขวา (+) ซึ่งควรแสดงหน้าต่อไปนี้:
ที่นี่เลือก 90 และคลิกดำเนินการต่อ ในเมนูแบบเลื่อนลงที่แสดง ให้เลือก App ID ที่เราสร้างไว้ก่อนหน้านี้และดำเนินการต่อ
ถัดไป รายการตรวจสอบใบรับรองจะปรากฏขึ้นซึ่งเราสามารถเลือกได้หนึ่งรายการหรือหลายรายการ สิ่งเหล่านี้เป็นใบรับรองการพัฒนาและไม่ใช่ใบรับรองการแจกจ่าย โปรไฟล์การจัดสรรที่สร้างขึ้นจะเชื่อมโยงกับใบรับรองเหล่านี้
เมื่อคุณคลิกดำเนินการต่อ รายการตรวจสอบของอุปกรณ์จะปรากฏขึ้น เลือกหนึ่งรายการ หลายรายการ หรือทั้งหมด เฉพาะอุปกรณ์ที่เลือกเท่านั้นที่จะได้รับอนุญาตให้เรียกใช้แอปโดยใช้โปรไฟล์การจัดสรรนี้
จากนั้น หลังจากคลิกดำเนินการต่อ ให้ป้อนชื่อโปรไฟล์การจัดสรร และดาวน์โหลดไฟล์ .mobileprovision ที่สร้างขึ้น
หมายเหตุ :เป็นกระบวนการเดียวกันในการสร้างโปรไฟล์การจัดเตรียมการกระจาย Adhoc ของคุณ การสร้างโปรไฟล์การจัดเตรียมการจัดจำหน่าย AppStore ก็คล้ายกันมากเช่นกัน ยกเว้นโปรไฟล์ที่เราไม่ได้เลือกอุปกรณ์ เนื่องจากแอปจะพร้อมใช้งานแบบสาธารณะผ่าน AppStore
ตอนนี้เรามีทุกสิ่งที่ต้องการแล้ว เราจึงสามารถสร้าง ipa จริงโดยใช้ Xcode ต่อไปได้
คำสั่ง Cordova build แปลงโค้ดแอปของเราเป็นโปรเจ็กต์ xcode การใช้ Xcode เราสร้างไฟล์ .ipa ซึ่งเป็นแอปจริงที่จะติดตั้ง
ก่อนที่จะก้าวไปข้างหน้า ให้แตะสองครั้งที่ใบรับรองทั้งสองเพื่อเพิ่มลงในพวงกุญแจของคุณ
ดำเนินการต่อใน Xcode
จากนั้น ให้แตะไฟล์ .xcodeproj สองครั้งซึ่งควรเปิดใน Xcode (โปรดใช้ Xcode เวอร์ชันล่าสุด – ฉันใช้ Xcode 8.3.2 แล้ว)
หน้าจอ Xcode ควรมีลักษณะคล้ายภาพด้านบน
คลิกที่ชื่อแอปที่มุมซ้ายบนของหน้าต่าง ซึ่งจะเปิดมุมมองรายละเอียดทางด้านขวา
จากนั้นคลิกที่เป้าหมาย -> ชื่อแอป:
ซึ่งจะแสดงแท็บรายละเอียดต่อไปนี้:
คลิกที่ทั่วไป ซึ่งควรแสดงสิ่งนี้:
ยกเลิกการเลือกช่องทำเครื่องหมายจัดการการลงนามโดยอัตโนมัติ
สิ่งนี้ควรแสดงข้อผิดพลาดต่อไปนี้ โดยระบุว่า AppNAme จำเป็นต้องมีโปรไฟล์การจัดเตรียม:
จากนั้น ในส่วนการลงนาม (แก้ไขข้อบกพร่อง) ให้คลิกรายการแบบเลื่อนลงโปรไฟล์การจัดเตรียม และเลือกนำเข้าโปรไฟล์ ตัวเลือก ในกล่องโต้ตอบการเลือกไฟล์ที่ปรากฏขึ้น ให้นำทางไปยังเส้นทางที่ดาวน์โหลดโปรไฟล์การจัดเตรียมการพัฒนา และเลือก โดยจะมีส่วนขยายเป็น .mobileprovision
หลังจากที่คุณเลือกแล้ว ข้อผิดพลาดควรจะหายไป และควรแสดงทีมเป็นชื่อทีมในบัญชีนักพัฒนา Apple ของคุณและชื่อใบรับรองการลงนาม
ทำสิ่งเดียวกันกับส่วนการลงนาม (เผยแพร่) แต่ในกล่องโต้ตอบการเลือกไฟล์ ให้เลือกโปรไฟล์การแจกจ่ายเฉพาะกิจ
เมื่อขั้นตอนการลงนามโค้ดเสร็จสิ้นแล้ว เราก็
- เรียกใช้แอปบนอุปกรณ์โดยตรง
- เรียกใช้แอปบนเครื่องจำลอง
- สร้างไฟล์ ipa เพื่อการแจกจ่าย
- อัปโหลดแอปไปที่ Appstore
เรียกใช้แอปบนอุปกรณ์โดยตรง
หากต้องการเรียกใช้แอปบนอุปกรณ์ให้เชื่อมต่ออุปกรณ์กับ Mac ผ่าน USB จากนั้นที่มุมซ้ายบนในรายการอุปกรณ์ ให้เลือกอุปกรณ์ที่เชื่อมต่อ แล้วคลิกปุ่มเรียกใช้หรือเล่น (ปุ่มสามเหลี่ยมสีดำ):
สถานะการสร้างจะแสดงในแถบสถานะที่ด้านบนของหน้าต่าง หากทุกอย่างเป็นไปด้วยดี ควรติดตั้งแอปบนอุปกรณ์ และควรโหลดโดยอัตโนมัติในอีกสักครู่
หมายเหตุ :ขั้นตอนจะเหมือนกันสำหรับการรันแอปบนเครื่องจำลอง แต่แทนที่จะใช้อุปกรณ์จริง เราใช้เครื่องจำลอง iPhone และ iPad ที่มีอยู่จากรายการอุปกรณ์
สร้างไฟล์ ipa เพื่อการเผยแพร่
วิธีการนี้สามารถทำได้ในกรณีที่คุณต้องการเผยแพร่แอปให้กับทีมทดสอบ ฯลฯ อย่างไรก็ตาม อุปกรณ์ที่ใช้จะต้องมี UDID อยู่ในโปรไฟล์การจัดเตรียม
จากเมนู Xcode ให้เลือก 103 -> 115 จากนั้น 122 -> 135 . ตัวจัดระเบียบไฟล์เก็บถาวรจะปรากฏขึ้นและแสดงไฟล์เก็บถาวรใหม่
ในแผงด้านขวามือ ให้เลือกตัวเลือกส่งออก จากนั้นรายการตัวเลือกจะปรากฏขึ้น
หากต้องการเผยแพร่แอปของคุณให้กับผู้ใช้ที่มีอุปกรณ์ที่กำหนด ให้เลือก “บันทึกสำหรับการปรับใช้เฉพาะกิจ” แอปจะเป็นรหัสที่ลงนามด้วยใบรับรองการแจกจ่าย
หากต้องการเผยแพร่แอปของคุณสำหรับการทดสอบภายใน ให้เลือก “บันทึกเพื่อการปรับใช้การพัฒนา” แอปจะเป็นโค้ดที่ลงนามด้วยใบรับรองการพัฒนาของคุณ
ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกทีมจากเมนูป๊อปอัปแล้วคลิกเลือก
ถัดไปกล่องโต้ตอบการเลือกอุปกรณ์จะปรากฏขึ้น เลือก อุปกรณ์ทั้งหมด หรืออุปกรณ์เฉพาะ และคลิกถัดไป
ถัดไปกล่องโต้ตอบการตรวจสอบจะปรากฏขึ้น ที่นี่จะแสดงใบรับรองการลงนามและโปรไฟล์การจัดเตรียมที่ใช้สำหรับการสร้างบิลด์ ตรวจสอบและคลิกถัดไป ในที่สุด ไฟล์ที่บันทึกเป็นป๊อปอัปจะปรากฏขึ้นเพื่อเลือกตำแหน่งในระบบไฟล์เพื่อจัดเก็บไฟล์แอปที่ส่งออก
แอปถูกส่งออกเป็นไฟล์ .ipa` .
หากต้องการเรียกใช้ไฟล์นี้บนอุปกรณ์ เพียงแตะสองครั้งที่ไฟล์เพื่อเปิดใน iTunes
จากนั้นเชื่อมต่ออุปกรณ์ของคุณ (ควรแสดงไอคอนอุปกรณ์ขนาดเล็กที่มุมซ้ายบนของหน้าต่าง iTunes) การแตะจะแสดงสรุปอุปกรณ์ เช่น แอพ เพลง ฯลฯ บนอุปกรณ์ เลือกแท็บแอป และในบานหน้าต่างด้านซ้ายให้เลือกแอปที่จะติดตั้ง แล้วคลิกติดตั้ง รอให้กระบวนการเสร็จสิ้นแล้วคลิกนำไปใช้ สิ่งนี้ควรติดตั้งไฟล์ ipa บนอุปกรณ์ของคุณ
หากต้องการแก้ไขข้อบกพร่องของแอป:
- เปิดซาฟารี
- เปิดแอปบนอุปกรณ์
- ในแถบเมนู Safari ให้เลือก
142.
นั่นแหละทุกคน!
เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพ่นซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานในตำแหน่งนักพัฒนา เริ่มต้น
