Créer une application pour Apple TV

Bonjour à tous, je suis Xavier, développeur iOS à Webwag Mobile. Dans cet article, vous allez découvrir comment réaliser une application pour Apple TV. À Webwag Mobile, nous avons reçu l’Apple TV avant sa sortie officielle pour pouvoir commencer à développer dessus. Aujourd’hui, nous avons plusieurs applications disponibles sur le Store, TéléStar, AutoPlus, SportAuto, AutoJournal et Closer.

L’arrivée de l’Apple TV quatrième génération, fin 2015, a popularisé l’utilisation d’applications sur nos téléviseurs. En effet, c’est la première Apple TV a proposer un AppleStore dédié au système, tvOS. Nous allons créer pas-à-pas une application pour Apple TV relativement basique mais qui vous permettra de comprendre les différences à prendre en compte par rapport à une application iOS.

C’est quoi l’Apple TV ?L'Apple TV

L’Apple TV est un boitier se branchant à la télévision, comme celui de votre fournisseur d’accès à internet qui vous permet de regarder la télé.
Étant un produit Apple, le système intègre iTunes ce qui vous permet d’utiliser votre compte pour avoir accès à vos musiques et films. Il y a bien sûr l’AppStore où vous retrouverez applications et jeux pouvant se jouer avec la manette vendu par Apple.

 

Quelle différence avec une application iOS ?

La principale différence avec une application iOS est que contrairement à l’iPhone, l’écran de votre téléviseur n’est pas tactile. Plutôt qu’une interaction à l’aide des flèches d’une télécommande, Apple a opté pour une télécommande avec une partie tactile où l’utilisateur fait glisser son doigt pour se déplacer. Il faut donc que la navigation soit intuitive pour que lorsque l’utilisateur déplace le focus, celui-ci aille où l’utilisateur s’y attend.

La télécommande de l'Apple TV

Aussi, les applications tvOS que vous soumettrez, ne seront disponible que sur l’AppleStore de l’Apple TV, et vous n’avez pas accès à celles d’iOS.

Rentrons dans le vif du sujet !

Commençons par créer le projet. Lancez Xcode, dans l’onglet tvOS, sélectionnez Single View Application.

Nommez le, pour ma part je l’ai nommé TutoTvOS. Puis lancez l’exécution, le simulateur se lancera automatiquement. L’application est vide, mais vous pouvez revenir sur la page d’accueil de l’Apple TV en appuyant sur Command+Shift+H.

Vous pouvez aussi afficher la télécommande avec Command+Shift+R puis simuler le swipe en appuyant sur Option tout en bougeant la souris. Je préfère pour ma part utiliser les flèches directionnelles du clavier.

À la place du logo de l’Apple TV, Apple vous force à mettre une image pour soumettre l’application sur le store. Celle-ci doit être en 1920×720 et, depuis tvOS 10, une deuxième est demandé de 2320×720.

Revenez sur Xcode, allez dans Assets.xcassets, puis mettez les images que vous souhaitez dans Top Shelf Image et Top Shelf Image Wide.

C’est déjà plus accueillant !

La UICollectionView et le focus

Allons maintenant dans le Storyboard y ajouter une UICollectionView, en scroll horizontal, contenant une UICollectionViewCell qui contient une UIImageView. Reliez la UICollectionView à un IBOutlet dans votre fichier ViewController.swift.

Nous allons afficher des images de capitales européennes, ajoutez les images au projet puis complétez votre fichier ViewController.swift :

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.collectionView.dataSource = self
        self.collectionView.delegate = self
    }

    public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return capitals().count
    }
 
    public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "capital_cell", for: indexPath)

        let capital = capitals()[indexPath.row] as! [String : String]

        if let imageView = cell.viewWithTag(1) as? UIImageView {
            imageView.image = UIImage(named: capital.values.first!)
        }

        return cell
    }
 
    func capitals() -> Array<[String : String]> {
        let capitals = [["Paris" : "paris.jpg"],
                        ["Berlin" : "berlin.jpg"],
                        ["Lisbonne" : "lisbon.jpg"],
                        ["Londres" : "london.jpg"],
                        ["Madrid" : "madrid.jpg"],
                        ["Rome" : "roma.jpg"]]

        return capitals
    }
}

Exécutez le programme. Les images s’affichent et vous pouvez les parcourir. Cependant vous remarquerez que rien ne vous indique sur laquelle vous êtes positionné. Pour cela, ajoutez dans la méthode cellForItemAtIndexPath la ligne suivante :


imageView.adjustsImageWhenAncestorFocused = true

L’image sur laquelle on positionné est maintenant plus grande que les autres

Si rien n’a changé, vérifiez dans le Storyboard que vous n’ayez pas un Clip To Bounds d’activé.

La UICollectionView a une méthode delegate didUpdateFocusInContext qui permet d’être notifié lorsque l’on change le focus. Ajoutez un UILabel sous votre UICollectionView et ajoutez le code suivant :

@IBOutlet weak var capitalNameLabel: UILabel!

public func collectionView(_ collectionView: UICollectionView, didUpdateFocusIn context: UICollectionViewFocusUpdateContext, with coordinator: UIFocusAnimationCoordinator) {
    if let indexPath = context.nextFocusedIndexPath {
        let capital = capitals()[indexPath.row] as! [String : String]
        self.capitalNameLabel.text = capital.keys.first!
    }
}

Le nom de la capitale change en fonction de l’image en focus

 

La Top Shelf Extension

Vous vous souvenez de l’image qu’on a mise sur l’accueil pour présenter l’application ? La Top Shelf permet de faire plus que ça. On peut y afficher par exemple le contenu le plus récent auquel l’utilisateur peut rapidement accéder.

Cliquer sur votre projet dans Xcode puis, en bas de la liste des Targets, appuyez sur + et ajouter un TV Services Extension.

Xcode vous créera le dossier de votre nouvelle Target contenant un fichier ServiceProvider.swift. Ouvrez celui-ci et mettez-y le code suivant :

class ServiceProvider: NSObject, TVTopShelfProvider {

    override init() {
        super.init()
    }

    // MARK: - TVTopShelfProvider protocol

    var topShelfStyle: TVTopShelfContentStyle {
        // Return desired Top Shelf style.
        return .sectioned
    }

    var topShelfItems: [TVContentItem] {
        var contentItems = [TVContentItem]();

        for capital in self.capitals() {
            contentItems.append(self.buildShelfItem(withTitle: capital.keys.first!, image: capital.values.first!))
        }

        let sectionItem = TVContentItem(contentIdentifier: TVContentIdentifier(identifier: "Capitales", container: nil)!)
        sectionItem!.title = "Capitales"
        sectionItem!.topShelfItems = contentItems

        return [sectionItem!]
    }
 
    func buildShelfItem(withTitle title: String, image: String) -> TVContentItem {
        let item = TVContentItem(contentIdentifier: TVContentIdentifier(identifier: title, container: nil)!)
        item!.imageURL = Bundle.main.url(forResource:image, withExtension: "jpg")
        item!.imageShape = .square
        item!.title = title
        return item!
    }
 
    func capitals() -> Array<[String : String]> {
        let capitals = [["Paris" : "paris"],
                        ["Berlin" : "berlin"],
                        ["Lisbonne" : "lisbon"],
                        ["Londres" : "london"],
                        ["Madrid" : "madrid"],
                        ["Rome" : "roma"]]

        return capitals
    }

}

La méthode topShelfStyle peut retourner deux style, le .sectioned, qui est celui par défaut, et le .inset, qui affiche le contenu sur toute la largeur de l’écran. Tandis que la méthode topShelfItems retourne un tableau de TVContentItem. Dans notre cas, on ne renvoie qu’une section alors qu’il pourrait très bien y en avoir plusieurs.

Exécutez le programme et vous verrez ceci :

L’URL Scheme

Vous pouvez ouvrir l’application en sélectionnant une capitale. Pour ça il vous faut ajouter cette ligne dans la méthode topShelfItems :


item!.displayURL = URL(string: "capital://" + title)

Rajouter l’URL Scheme dans votre info.plist :

Enfin, implémenter la méthode openURL dans AppDelegate.swift où vous pourrez ouvrir l’application :

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
    let urlString = url.absoluteString
    // ex: urlString = capital://Paris
    return true
}

Fin

Voilà, j’espère que ce tuto vous aura plu. Vous verrez que développer une application Apple TV n’est pas si différent d’une application iOS.

Articles liés
Android Tv et Nexus player
À la découverte du RecyclerView
DataBinding pour les applications Windows
Introduction à Volley et GSON

Laissez votre commentaire

Votre commentaire*

Votre Nom*
Votre site internet

17 + sept =