Computer >> Hướng Dẫn Máy Tính >  >> Điện Thoại Thông Minh >> iPhone

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Phát triển ứng dụng lai cho Android rất dễ dàng, dù cho phát triển hay cấu hình production. Nhưng tôi thấy thiết lập, phát triển và triển khai Cordova iOS hơi phức tạp.

Hầu hết các nhà phát triển ứng dụng lai ở giai đoạn học tập không thể khám phá quy trình phát triển ứng dụng iOS lai đơn giản vì họ không sở hữu Mac. Và phát triển ứng dụng iOS yêu cầu iOS SDK và Xcode (khác với Android SDK chạy trên mọi hệ điều hành Desktop).

Do đó, mục tiêu của hướng dẫn này là trình bày quy trình làm việc cơ bản của phát triển ứng dụng iOS lai trên Mac. Như vậy nhà phát triển có thể thấy cách thức thực hiện ngay cả khi họ không thể phát triển ứng dụng.

Tạo dự án Cordova

Bắt đầu bằng cách mở terminal và tạo dự án Cordova mới (chỉ dùng sudo nếu gặp vấn đề quyền, tức lỗi EACCESS):

sudo cordova create iosdemo cd iosdemo sudo cordova platform add ios 

Vào thời điểm viết hướng dẫn này, phiên bản nền tảng Cordova iOS là 4.3.1.

Chúng ta sẽ không sửa đổi mã nguồn của ứng dụng – mà chỉ tiếp tục với mã mẫu mặc định được Cordova thêm tự động khi chạy lệnh create. Tuy nhiên, giả định chúng ta sẽ thêm plugin và sửa mã trong thư mục www trong quy trình phát triển bình thường.

Bước tiếp theo là chạy lệnh cordova build. Điều này sẽ chuyển đổi mã ứng dụng thành file .xcodeproj mà chúng ta sẽ sử dụng tiếp theo.

sudo cordova build ios 

File dự án Xcode được tạo sẽ nằm ở đây:

[Thư mục ứng dụng của bạn]/platforms/ios/[Tên ứng dụng của bạn].xcodeproj 

Trong trường hợp Android, ký mã được thực hiện bằng file Keystore định dạng .jks. Tuy nhiên, trong iOS, bắt buộc phải có tài khoản nhà phát triển Apple để phân phối ứng dụng iOS. Điều này để chúng ta có thể tạo Chứng chỉ và Hồ sơ cấp phép cần thiết cho việc phân phối ứng dụng.

Về giá và thông tin khác về tài khoản Nhà phát triển, tham khảo trang này.

Tạo Chứng chỉ Phát triển

Khi đã sẵn sàng tài khoản, chúng ta có thể tiến hành và đăng nhập vào tài khoản nhà phát triển Apple.

Màn hình điều khiển sẽ trông như thế này:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Nhấp vào Certificates, Identifiers & Profiles. Điều này sẽ đưa bạn đến màn hình sau, mặc định hiển thị Chứng chỉ đã cấp từ tài khoản của bạn:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Chứng chỉ iOS chủ yếu có hai loại: Phát triển (Development) hoặc Phân phối (Distribution). Nhấp vào nút Plus (+) ở góc trên bên phải của danh sách, trang sau sẽ mở ra:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Đầu tiên, tạo hồ sơ phát triển. Chọn iOS App Development và nhấp tiếp tục.

Điều này sẽ đưa bạn đến màn hình sau, nơi bạn được yêu cầu tạo và tải lên file Yêu cầu ký chứng chỉ (CSR).

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Làm theo hướng dẫn trên màn hình để tạo nó, và tiếp tục. Khi chứng chỉ sẵn sàng, tải xuống về Mac, và nhấp đúp vào nó. Điều này sẽ thêm nó vào Keychain Access trên Mac.

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Tạo Chứng chỉ Phân phối

Tạo chứng chỉ phân phối tương tự quy trình tạo chứng chỉ phát triển. Tuy nhiên, ở đây chúng ta chọn App Store and Ad Hoc từ phần Production trong trang Add iOS Certificate:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Tạo App ID

Chọn App IDs từ phần Identifiers. Điều này sẽ mở danh sách App ID hiện có. Tiếp theo nhấp vào nút Plus ở góc trên bên phải (+). Trang Đăng ký App ID iOS sẽ mở ra.

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Chọn Explicit App ID. Mô tả App có thể là bất kỳ tên liên quan nào – đây là tên sẽ hiển thị trong danh sách App ID đối với App ID cụ thể đó.

Một App ID là chuỗi theo định dạng AB11A1ABCD.com.mycompany.myapp trong đó AB11A1ABCD là tiền tố App ID mặc định là Team ID và com.mycompany.myapp là Bundle ID duy nhất cho mỗi ứng dụng.

Khuyến nghị Bundle ID phải ở định dạng chuỗi tên miền ngược. Ví dụ, công ty MYCOMPANY có hai ứng dụng (App1 và App2). URL HTTP cho mỗi ứng dụng thường là app1.mycompany.com và app2.mycompany.com. Do đó Bundle ID cho mỗi ứng dụng sẽ là com.mycompany.app1 và com.mycompany.app2.

Tiếp theo chọn các dịch vụ từ danh sách kiểm tra mà bạn cần sử dụng trong ứng dụng, như Push Notifications, Wallet v.v. Nhấp tiếp tục và xác nhận chi tiết và cuối cùng đăng ký App ID.

Thêm thiết bị vào tài khoản nhà phát triển

Chọn All từ phần Devices. Điều này sẽ mở danh sách thiết bị đã thêm vào tài khoản nhà phát triển Apple. Chỉ các thiết bị này mới được phép chạy ứng dụng trong quá trình phát triển.

Để thêm thiết bị mới, nhấp vào nút Plus ở góc trên bên phải (+). Màn hình sau sẽ hiển thị:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Ở đây tên có thể là bất kỳ tên dễ hiểu nào, ví dụ iPhone 5s ABC Pvt Ltd. UDID thiết bị là ID duy nhất liên kết với mỗi thiết bị Apple.

Để tìm UDID của thiết bị, làm theo các bước sau:

  1. Kết nối thiết bị với Mac.
  2. Mở ứng dụng System Information nằm trong thư mục /Applications/Utilities.
  3. Chọn USB dưới Hardware ở cột bên trái.
  4. Ở bên phải, chọn thiết bị đã kết nối dưới USB Device Tree. ID thiết bị, hoặc "Số seri", xuất hiện bên dưới.

Khi đã nhập UDID và tên thiết bị, nhấp tiếp tục, sau đó xác nhận chi tiết và đăng ký.

Tạo Hồ sơ cấp phép Phát triển

Để tạo Hồ sơ cấp phép Phát triển, nhấp vào Provisioning Profiles -> All. Điều này sẽ hiển thị tất cả hồ sơ, phát triển cũng như phân phối. Tiếp theo nhấp vào nút Plus ở góc trên bên phải (+). Trang sau sẽ hiển thị:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Ở đây chọn iOS App Development và nhấp tiếp tục. Trong menu thả xuống hiển thị, chọn App ID chúng ta đã tạo trước đó và tiếp tục.

Tiếp theo, danh sách kiểm tra chứng chỉ được hiển thị, từ đó chúng ta có thể chọn một hoặc nhiều. Đây là chứng chỉ phát triển, không phải phân phối. Hồ sơ cấp phép được tạo sẽ được liên kết với các chứng chỉ này.

Khi nhấp Continue, danh sách kiểm tra thiết bị được hiển thị. Chọn một, nhiều hoặc tất cả. Chỉ thiết bị được chọn mới được phép chạy ứng dụng sử dụng hồ sơ cấp phép này.

Tiếp theo, sau khi nhấp continue, nhập tên cho hồ sơ cấp phép, và tải xuống file .mobileprovision được tạo.

Lưu ý: quy trình tạo Hồ sơ cấp phép Phân phối Adhoc là giống hệt nhau. Cũng rất tương tự để tạo Hồ sơ cấp phép Phân phối AppStore, ngoại trừ việc chúng ta không chọn thiết bị, vì ứng dụng sẽ có sẵn công khai qua AppStore.

Bây giờ chúng ta đã có tất cả những gì cần thiết, có thể tiếp tục tạo file ipa thực tế bằng Xcode.

Lệnh cordova build chuyển đổi mã ứng dụng thành dự án Xcode. Sử dụng Xcode, chúng ta tạo file .ipa là ứng dụng thực tế để cài đặt.

Trước khi tiến hành, nhấp đúp vào cả hai Chứng chỉ để thêm chúng vào keychain của bạn.

Tiếp tục trong Xcode

Tiếp theo, nhấp đúp vào file .xcodeproj, nó sẽ mở trong Xcode. (Vui lòng sử dụng phiên bản Xcode mới nhất – tôi đã dùng Xcode 8.3.2.)

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Màn hình Xcode sẽ trông giống như trên.

Nhấp vào Tên ứng dụng ở góc trên bên trái của cửa sổ. Điều này sẽ mở chế độ xem chi tiết ở bên phải.

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Sau đó nhấp vào Targets -> Tên ứng dụng:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Điều này sẽ hiển thị tab Details sau:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Nhấp vào General, sẽ hiển thị:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Bỏ chọn hộp kiểm "Automatically Manage Signing".

Điều này sẽ hiển thị lỗi sau, nêu rõ AppName yêu cầu hồ sơ cấp phép:

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Tiếp theo, dưới Signing (Debug), nhấp vào menu thả xuống Provisioning Profile và chọn tùy chọn import profile. Trong hộp thoại chọn file xuất hiện, điều hướng đến đường dẫn nơi hồ sơ cấp phép phát triển được tải xuống, và chọn nó. Nó sẽ có phần mở rộng .mobileprovision.

Sau khi chọn xong, lỗi nên biến mất, và sẽ hiển thị Team là Tên Team trong tài khoản nhà phát triển Apple của bạn và Tên Chứng chỉ ký.

Làm tương tự cho phần Signing (Release) – nhưng trong hộp thoại chọn file, chọn Hồ sơ phân phối Ad Hoc.

Bây giờ các bước ký mã đã xong, chúng ta có thể:

  • chạy ứng dụng trực tiếp trên thiết bị
  • chạy ứng dụng trên trình mô phỏng
  • tạo file ipa để phân phối
  • tải ứng dụng lên App Store

Chạy ứng dụng trực tiếp trên thiết bị

Để chạy ứng dụng trên thiết bị, kết nối thiết bị với Mac qua USB. Sau đó ở góc trên bên trái trong danh sách thiết bị, chọn thiết bị đã kết nối, và nhấp nút run hoặc play (nút tam giác đen):

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Trạng thái build sẽ hiển thị trong thanh trạng thái ở đầu cửa sổ. Nếu mọi thứ suôn sẻ, ứng dụng sẽ được cài đặt trên thiết bị và tự động khởi động sau một lúc.

Lưu ý: các bước giống hệt nhau để chạy ứng dụng trên trình mô phỏng. Nhưng thay vì thiết bị thực tế, chúng ta dùng các trình mô phỏng iPhone và iPad có sẵn từ danh sách thiết bị.

Tạo file ipa để phân phối

Cách này dùng khi cần phân phối ứng dụng cho nhóm kiểm thử, v.v. Tuy nhiên, thiết bị họ dùng phải có UDID có mặt trong hồ sơ cấp phép.

Từ menu Xcode chọn Product -> Clean, sau đó Product -> Archive. Trình tổ chức Archives xuất hiện và hiển thị archive mới.

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Trong bảng điều khiển bên phải, chọn tùy chọn Export và danh sách tùy chọn sẽ hiện ra.

Để phân phối ứng dụng cho người dùng có thiết bị chỉ định, chọn "Save for Ad Hoc Deployment". Ứng dụng sẽ được ký mã với chứng chỉ phân phối.

Để phân phối ứng dụng cho kiểm thử nội bộ, chọn "Save for Development Deployment". Ứng dụng sẽ được ký mã với chứng chỉ phát triển của bạn.

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Trong hộp thoại xuất hiện, chọn team từ menu thả xuống và nhấp Choose.

Thành thạo phát triển Cordova iOS: Từ thiết lập đến triển khai liền mạch

Tiếp theo hộp thoại chọn thiết bị xuất hiện. Chọn All devices hoặc specific devices và nhấp next.

Tiếp theo hộp thoại review hiển thị. Ở đây sẽ hiển thị chứng chỉ ký và hồ sơ cấp phép dùng để tạo build. Xem xét và nhấp next. Cuối cùng hộp thoại lưu file dưới dạng popup hiển thị để chọn vị trí trong hệ thống file lưu file ứng dụng đã xuất.

Ứng dụng được xuất dưới dạng file .ipa.

Để chạy file này trên thiết bị, chỉ cần nhấp đúp vào nó, nó sẽ mở trong iTunes.

Sau đó kết nối thiết bị của bạn (nên hiển thị biểu tượng thiết bị nhỏ ở góc trên bên trái cửa sổ iTunes). Nhấp vào nó sẽ hiển thị tóm tắt thiết bị như ứng dụng, nhạc v.v. trên thiết bị. Chọn tab apps, và ở bảng điều khiển bên trái chọn ứng dụng để cài đặt và nhấp install. Chờ quá trình hoàn tất và nhấp apply. Điều này sẽ cài đặt file ipa trên thiết bị của bạn.

Để gỡ lỗi ứng dụng:

  1. mở Safari
  2. mở ứng dụng trên thiết bị
  3. trong thanh menu Safari chọn Develop --> Your Device Name --> Your App.

Đó là tất cả!

Học lập trình miễn phí. Chương trình mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người tìm được việc làm với tư cách là nhà phát triển. Bắt đầu ngay