Author: TienVV8

Hi, Ở phần 1 mình đã giới thiệu đến các bạn tổng quan về CP (CarPlay). Phần này mình sẽ chia sẻ cách để xây dựng một ứng dụng hỗ trợ CP, cụ thể ở đây là ứng dụng hỗ trợ một trong 8 CP types mà apple cung cấp, còn type Automaker thì mình chia sẻ mở bài tiếp theo.

Bắt đầu nào!!!

Tạo Project

Ứng dụng CP cũng là một ứng dụng bình thường, các bạn vẫn sử dụng xCode và tạo project như bình thường. Phần code của phone và CP sẽ là hai phần riêng biệt. Vì trên iPhone quá quen thuộc với các bạn rồi nên ở hướng dẫn này mình chỉ thực hiện hiển thị 1 dòng chữ ở giữa màn hình trên iPhone và tập chung vào việc hiển thị trên CP với các template

Tạo entitlement file

Như mình đề cập ở phần 1, với 8 type bình thường của Apple cung cấp thì đi kèm với nó là các entitlement key, thì key này sử dụng ở đâu?. Câu trả lời là key này sử dụng để config trong entitlement file.

Select file -> New file -> choose Property List

Điền tên file và chọn create

Ở đây mình để tên file là CPTemplateSeminar.entitlements

Sau khi tạo entitlement file thì chúng ta cần nhúng đường path dẫn đến entitlement file vào Code Signing Entitlements bằng cách chọn Project Setting -> Build Setting -> Code Signing Entitlements và set giá trị là path dẫn đến entitlement file

Tip: Ngoài cách tạo file và nhúng đường path như ở trên, các bạn có thể enable bất kì một Capabilities nào đó trong xCode để xCode tự động tạo ra entitlement file và tự động nhúng đường path vào Code Signing Entitlements

Sau khi setting Code Signing Entitlements xong, Chúng ta đến bước add entitlement key vào file vừa tạo.
Ở đây mình sử dụng key com.apple.developer.carplay-audio. (Nếu các bạn chưa biết key này là gì và lấy ở đâu thì các bạn xem lại phần 1 của mình nhé!)

Implement Template

Tạo một class kế thừa CPTemplateApplicationSceneDelegate, delegate này có các methods như didConnect, didDisconnectInterfaceController …

import CarPlay

class CPSceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {

    var interfaceController: CPInterfaceController?

    // CarPlay connected
    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene,
                                  didConnect interfaceController: CPInterfaceController) {
        self.interfaceController = interfaceController
    }

    // CarPlay disconnected
    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene, didDisconnectInterfaceController interfaceController: CPInterfaceController) {
        self.interfaceController = nil
    }
}

Setting info.plist

Tất cả các CP app đều phải khai báo CP scene để dử dụng CP Framework. Để khai báo CP scene thì chúng ta khai báo ở trong info.plist

Khai báo thêm key CPTemplateApplicationSceneSessionRoleApplication theo như hướng dẫn dưới đây:
Mình set UISceneConfigurationName là CarPlay, UISceneDelegateClassName là class mà mình đã tạo ở bên trên

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>UIApplicationSceneManifest</key>
	<dict>
		<key>UIApplicationSupportsMultipleScenes</key>
		<false/>
		<key>UISceneConfigurations</key>
		<dict>
			<key>CPTemplateApplicationSceneSessionRoleApplication</key>
			<array>
				<dict>
					<key>UISceneConfigurationName</key>
					<string>CarPlay</string>
					<key>UISceneDelegateClassName</key>
					<string>$(PRODUCT_MODULE_NAME).CPSceneDelegate</string>
				</dict>
			</array>
			<key>UIWindowSceneSessionRoleApplication</key>
			<array>
				<dict>
					<key>UISceneConfigurationName</key>
					<string>iPhone</string>
					<key>UISceneDelegateClassName</key>
					<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
					<key>UISceneStoryboardFile</key>
					<string>Main</string>
				</dict>
			</array>
		</dict>
	</dict>
</dict>
</plist>

Setup Root Template

Như một ứng dụng thông thường thì CP app cũng cần setup root view. Ở hướng dẫn này mình xây dựng CP app với root template là 1 tab bar bao gồm tab Home và tab Setting. Tab Home và Setting mình sẽ hiển thị list đơn giản

    // CarPlay connected
    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene,
                                  didConnect interfaceController: CPInterfaceController) {
        self.interfaceController = interfaceController
        interfaceController.setRootTemplate(createTabTemplate(), animated: true, completion: nil)
    }

import Foundation
import CarPlay

// MARK: - Tab Template
extension CPSceneDelegate {
    func createTabTemplate() -> CPTabBarTemplate {
        var tabs: [CPTemplate] = []

        let homeItem = CPListItem(text: "Home", detailText: "")
        let homeSection = CPListSection(items: [homeItem])
        let homeTemplate = CPListTemplate(title: "Home", sections: [homeSection])
        homeTemplate.tabImage = UIImage(systemName: "house.fill")

        let settingItem = CPListItem(text: "Setting", detailText: "")
        let settingSection = CPListSection(items: [settingItem])
        let settingTemplate = CPListTemplate(title: "Home", sections: [settingSection])
        settingTemplate.tabImage = UIImage(systemName: "gearshape.fill")

        tabs.append(homeTemplate)
        tabs.append(settingTemplate)

        let tabBar = CPTabBarTemplate(templates: tabs)
        return tabBar
    }
}

Mình tạo một tab bar bằng cách sử dụng CPTabBarTemplate, và mình set tab bar này thành root template khi iPhone và màn hình trên ô tô được kết nối.

Đến step này là đã hoàn thành việc coding một ứng dụng hỗ trợ CP rồi, Chúng ta có thể trải nghiệm ứng dụng bằng cách build lên simulator và sau đó mở cửa sổ xCode Simulator để xem thành quả. Tuy nhiên mình sẽ thêm phần action bấm vào item trên màn home và thực hiện di chuyển đến màn hình phát nhạc.

Tạo Now Playing template

import Foundation
import CarPlay

// MARK: - Playing now Template
extension CPSceneDelegate {
    func createNowPlaying() -> CPNowPlayingTemplate {
        let playing = CPNowPlayingTemplate.shared
        playing.add(self)
        playing.isUpNextButtonEnabled = true
        playing.isAlbumArtistButtonEnabled = true

        return playing
    }
}

extension CPSceneDelegate: CPNowPlayingTemplateObserver {
    
    func nowPlayingTemplateUpNextButtonTapped(_ nowPlayingTemplate: CPNowPlayingTemplate) {

    }

    func nowPlayingTemplateAlbumArtistButtonTapped(_ nowPlayingTemplate: CPNowPlayingTemplate) {

    }
}

Thực hiện di chuyển khi bấm vào item trên màn hình Home. Mình sẽ thực hiện pushTemplate đến màn hình Now Playing được tạo bên trên, Các bạn có thể thực hiện push hoặc present tuỳ thích, tuy nhiên ở phần 1 mình cũng có warning là không phải template nào cũng có thể push và present được. Các bạn cứ thử thực hiện để trải nghiệm nhé!

import Foundation
import CarPlay

// MARK: - Tab Template
extension CPSceneDelegate {
    func createTabTemplate() -> CPTabBarTemplate {
        var tabs: [CPTemplate] = []

        let homeItem = CPListItem(text: "Home", detailText: "")
        homeItem.handler = { item, completion in
            self.interfaceController?.pushTemplate(self.createNowPlaying(), animated: true, completion: nil)
            completion()
        }
        let homeSection = CPListSection(items: [homeItem])
        let homeTemplate = CPListTemplate(title: "Home", sections: [homeSection])
        homeTemplate.tabImage = UIImage(systemName: "house.fill")

        let settingItem = CPListItem(text: "Setting", detailText: "")
        let settingSection = CPListSection(items: [settingItem])
        let settingTemplate = CPListTemplate(title: "Home", sections: [settingSection])
        settingTemplate.tabImage = UIImage(systemName: "gearshape.fill")

        tabs.append(homeTemplate)
        tabs.append(settingTemplate)

        let tabBar = CPTabBarTemplate(templates: tabs)
        return tabBar
    }
}

Ở đây mình chỉ sử dụng các template mà Audio type hỗ trợ, các bạn cũng có thể sử dụng các template mà Audio không hỗ trợ để trải nghiệm nhé, ví dụ như sử dụng Action Sheet template. (Lưu ý là app sẽ crash nhé!!!)

Ngoài ra các bạn cũng có thể xây dựng ứng dụng của mình với các type còn lại để trải nghiệm nhé!

Kết quả

Sau khi build trên xCode Simulator mình được kết quả như sau:

Trên đây là phần mình chia sẻ về cách tạo một ứng dụng hỗ trợ CP sử dụng type là template được cung cấp bởi Apple. Bài tiếp theo mình sẽ chia sẻ về cách tạo một ứng dụng hỗ tợ CP với type Automaker

Mình hi vọng bài viết có thể giúp ích được cho các bạn. Chúc các bạn thành công!

Xin chào mọi người. Phần 1 mình đã hướng dẫn các bạn setup môi trường và setup payments rồi. Bài này mình sẽ tiếp tục với implement code và thực hiện test sau khi implement.

Implement

Đầu tiên chúng ta enable In-App Purchase trong Capability

Bắt đầu implememt code

Ở bài trước mình đã tạo một item tên là Apple Book và đặt productID là Demo.TechoverInAppPurchase.co.Apple.Book

Cũng trong bài trước mình có nhấn mạnh productID rất quan trọng và phải matching trong code, bên dưới đây mình sẽ thực hiện điều đó.

Đầu tiên mình tạo ra một file plist mình để tên là IAPProductIDs, mục đích của file này là để quản lý tất cả các purchase producIDs của ứng dụng, thường thì một ứng dụng sử dụng In-App Purchase sẽ có nhiều item thanh toán, cũng như nhiều giá trị khác nhau, mỗi giá item đó tương ứng với một productID, Hiện tại demo của mình chỉ có 1 item thanh toán vì thế trong file plist của mình chỉ có một item và value của item đó là productID.

Tiếp theo mình tạo ra một class IAPManager như bên dưới:

import Foundation
import StoreKit

class IAPManager: NSObject {
    
    // MARK: - Custom Types
    
    enum IAPManagerError: Error {
        case noProductIDsFound
        case noProductsFound
        case paymentWasCancelled
        case productRequestFailed
    }
    
    // MARK: - Properties
    
    static let shared = IAPManager()
    
    private var onReceiveProductsHandler: ((Result<[SKProduct], IAPManagerError>) -> Void)?
    private var onBuyProductHandler: ((Result<Bool, Error>) -> Void)?
    
    var totalRestoredPurchases = 0
    
    // MARK: - Init
    
    private override init() {
        super.init()
    }
    
    // MARK: - General Methods
    
    fileprivate func getProductIDs() -> [String]? {
        guard let url = Bundle.main.url(forResource: "IAPProductIDs", withExtension: "plist") else { return nil }
        do {
            let data = try Data(contentsOf: url)
            let productIDs = try PropertyListSerialization.propertyList(from: data, options: .mutableContainersAndLeaves, format: nil) as? [String] ?? []
            return productIDs
        } catch {
            print(error.localizedDescription)
            return nil
        }
    }
    
    func getPriceFormatted(for product: SKProduct) -> String? {
        let formatter = NumberFormatter()
        formatter.numberStyle = .currency
        formatter.locale = product.priceLocale
        return formatter.string(from: product.price)
    }
    
    func startObserving() {
        SKPaymentQueue.default().add(self)
    }
    
    func stopObserving() {
        SKPaymentQueue.default().remove(self)
    }
    
    func canMakePayments() -> Bool {
        return SKPaymentQueue.canMakePayments()
    }
    
    // MARK: - Get IAP Products
    
    func getProducts(withHandler productsReceiveHandler: @escaping (_ result: Result<[SKProduct], IAPManagerError>) -> Void) {
        onReceiveProductsHandler = productsReceiveHandler
        
        guard let productIDs = getProductIDs() else {
            productsReceiveHandler(.failure(.noProductIDsFound))
            return
        }
        
        let request = SKProductsRequest(productIdentifiers: Set(productIDs))
        request.delegate = self
        request.start()
    }

    // MARK: - Purchase Products
    
    func buy(product: SKProduct, withHandler handler: @escaping ((_ result: Result<Bool, Error>) -> Void)) {
        let payment = SKPayment(product: product)
        SKPaymentQueue.default().add(payment)
        
        onBuyProductHandler = handler
    }
    
    func restorePurchases(withHandler handler: @escaping ((_ result: Result<Bool, Error>) -> Void)) {
        onBuyProductHandler = handler
        totalRestoredPurchases = 0
        SKPaymentQueue.default().restoreCompletedTransactions()
    }
}

// MARK: - SKPaymentTransactionObserver

extension IAPManager: SKPaymentTransactionObserver {
    func paymentQueue(_ queue: SKPaymentQueue, updatedTransactions transactions: [SKPaymentTransaction]) {
        transactions.forEach { (transaction) in
            switch transaction.transactionState {
            case .purchased:
                onBuyProductHandler?(.success(true))
                SKPaymentQueue.default().finishTransaction(transaction)
            case .restored:
                totalRestoredPurchases += 1
                SKPaymentQueue.default().finishTransaction(transaction)
            case .failed:
                if let error = transaction.error as? SKError {
                    if error.code != .paymentCancelled {
                        onBuyProductHandler?(.failure(error))
                    } else {
                        onBuyProductHandler?(.failure(IAPManagerError.paymentWasCancelled))
                    }
                    print("IAP Error:", error.localizedDescription)
                }
                SKPaymentQueue.default().finishTransaction(transaction)
            case .deferred, .purchasing: break
            @unknown default: break
            }
        }
    }
    
    func paymentQueueRestoreCompletedTransactionsFinished(_ queue: SKPaymentQueue) {
        if totalRestoredPurchases != 0 {
            onBuyProductHandler?(.success(true))
        } else {
            print("IAP: No purchases to restore!")
            onBuyProductHandler?(.success(false))
        }
    }
    
    func paymentQueue(_ queue: SKPaymentQueue, restoreCompletedTransactionsFailedWithError error: Error) {
        if let error = error as? SKError {
            if error.code == .paymentCancelled {
                onBuyProductHandler?(.failure(IAPManagerError.paymentWasCancelled))
            } else {
                print("IAP Restore Error:", error.localizedDescription)
                onBuyProductHandler?(.failure(error))
            }
        }
    }
}

// MARK: - SKProductsRequestDelegate

extension IAPManager: SKProductsRequestDelegate {
    func productsRequest(_ request: SKProductsRequest, didReceive response: SKProductsResponse) {
        let products = response.products
        
        if !products.isEmpty {
            onReceiveProductsHandler?(.success(products))
        } else {
            onReceiveProductsHandler?(.failure(.noProductsFound))
        }
    }
    
    func request(_ request: SKRequest, didFailWithError error: Error) {
        onReceiveProductsHandler?(.failure(.productRequestFailed))
    }
    
    func requestDidFinish(_ request: SKRequest) {
        // Handle finish
    }
}

// MARK: - IAPManagerError Localized Error Descriptions

extension IAPManager.IAPManagerError: LocalizedError {
    var errorDescription: String? {
        switch self {
        case .noProductIDsFound:
            return "No In-App Purchase product identifiers were found."
        case .noProductsFound:
            return "No In-App Purchases were found."
        case .productRequestFailed:
            return "Unable to fetch available In-App Purchase products at the moment."
        case .paymentWasCancelled:
            return "In-App Purchase process was cancelled."
        }
    }
}

Ở class trên mình đã viết đầy đủ các methods như: buy(), restorePurchases()… Cũng như xử lý các error.

Bây giờ chúng ta sử dụng IAPManager để thực hiện purchase nhé.

Đầu tiên mình thực hiện layout một để một button có tên là buy ở giữa màn hình:

Tiếp theo mình thực hiện implement việc purchase trong class ViewController

import UIKit
import StoreKit

class ViewController: UIViewController {
    
    private var products: [SKProduct] = []

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        IAPManager.shared.getProducts { (result) in
            DispatchQueue.main.async {
                switch result {
                case .success(let products):
                    self.products = products
                case .failure(let error):
                    self.showAlert(message: error.localizedDescription)
                }
            }
        }
    }
    
    // MARK: - Actions

    @IBAction func didBuy(_ sender: UIButton) {
        DispatchQueue.main.async {
            self.verifyBeforeBuy()
        }
    }
    
    // MARK: - Private Methods
    
    private func verifyBeforeBuy() {
        guard let product = product(with: "Demo.TechoverInAppPurchase.co.Apple.Book"),
              let price = IAPManager.shared.getPriceFormatted(for: product) else {
            return
        }
        
        let alertController = UIAlertController(title: product.localizedTitle,
                                                message: product.localizedDescription,
                                                preferredStyle: .alert)
        
        alertController.addAction(UIAlertAction(title: "Buy now for \(price)", style: .default, handler: { (_) in
            self.buy(product: product)
        }))
        
        alertController.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))
        self.present(alertController, animated: true, completion: nil)
    }
    
    private func product(with id: String) -> SKProduct? {
        return products.first(where: { $0.productIdentifier == id })
    }
        
    private func buy(product: SKProduct) {
        if !IAPManager.shared.canMakePayments() {
            self.showAlert(message: "In-App Purchases are not allowed in this device.")
        } else {
            IAPManager.shared.buy(product: product) { result in
                switch result {
                case .success(let success):
                    if success {
                        self.showAlert(message: "Buy success")
                    } else {
                        self.showAlert(message: "Buy error")
                    }
                case .failure(let failure):
                    self.showAlert(message: failure.localizedDescription)
                }
            }
        }
    }
}

extension ViewController {
    func showAlert(title:String = "",
                   message: String) {
        let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
        self.present(alert, animated: true, completion: nil)
    }
}

Mình sẽ giải thích flow của việc purchase như sau:

• Ở viewWillAppear() mình lấy tất cả producIDs đã set trong IAPProductIDs.plist và lưu lại với biến products: [SKProduct]
• Khi người dùng bấm vào buy button mình thực hiện verify trước khi gọi đến IAPManager.shared.buy(product: product)
• verifyBeforeBuy(): mình lấy product có id là Demo.TechoverInAppPurchase.co.Apple.Book, từ product đó mình lấy ra price của product đó bằng method getPriceFormatted trong IAPManager và thông báo cho người dùng số tiền cần bỏ ra để mua item này
  
• Khi người dùng bấm confirm mua trên alert mình thực hiện kiểm tra xem device có cho phép thực hiện giao dịch hay không bằng method IAPManager.shared.canMakePayments, nếu có thì gọi đến IAPManager.shared.buy và nếu không cho phép thì hiển thị thông báo cho người dùng
• IAPManager.shared.buy(): sau khi thực hiện method này hệ thống sẽ show một actionsheet để người dùng xác nhận trước khi thực hiện giao dịch
  
• Sau khi thực hiện giao dịch nếu thành công sẽ nhận được một thông báo và thất bại thì mình cũng sẽ hiển thị thông báo cho người dùng
  

Test In-App Purchase sau khi implement

Trên thực tế khi thực hiện mỗi giao dịch đều mất tiền, vậy mỗi khi test in-app purchase thì đều mất tiền sao? Câu trả lời là không, vì apple đã support viêc testing thông qua apple sandbox account, điều này giúp developer cũng như tester thực hiện giao dịch mà không mất tiền.

Chúng ta vào đây để add sandbox account. Mình add account [email protected]

Tiếp theo chúng ta thực hiện login sandbox account trên device test.

Setting -> App Store -> Sandbox account -> login

Sau khi add sandbox account và login, chúng ta thực hiện purchase thì sẽ nhận được thông báo là đang purchase với account sandbox và không mất phí:

Thông qua phần 1 và bài này mình đã giới thiệu đến các bạn cách để thực hiện in-app purchase trong Swift.
Mình hi vọng bài viết có thể giúp ích được cho các bạn. Chúc các bạn thành công!