Introduzione allo sviluppo per tvOS

Italian (Italiano) translation by Chip (you can also view the original English article)

Introduzione

Al loro evento annuale di settembre per il 2015, oltre a nuovi modelli di iPhone e iPad, Apple ha annunciato il suo tanto atteso aggiornamento per il set-top box Apple TV. Questa nuova, quarta generazione di Apple TV include un potente processore A8, un telecomando Siri-enabled, un'interfaccia utente rinnovata e soprattutto, una nuova piattaforma per le applicazioni di terze parti e giochi, che Apple ha chiamato TVOS.

In questo tutorial, ho intenzione di farvi conoscere lo sviluppo per tvOS creando una applicazione base tvOS. Questo tutorial richiede che stia girando una versione Xcode 7.1 o successiva, che include il supporto per tvOS. Sto anche supponendo che si abbia già familiarità con lo sviluppo iOS.

1. Project Setup

Aprite Xcode e create un nuovo progetto. Noterete subito che l'elenco dei modelli comprende una sezione per le applicazioni tvOS. Dai modelli disponibili, scegliete tvOS > Application > Single View Application.

Fare clic su Next e configurare il progetto come illustrato di seguito. Ho optato per Swift come linguaggio del progetto, ma è possibile utilizzare anche Objective-C per sviluppare applicazioni tvOS.

Per completare l'impostazione del progetto, dite a Xcode dove si desidera salvare il progetto. La prima cosa che noterete è che il progetto è strutturato in modo quasi identico ad una normale applicazione iOS. Nello screenshot qui sotto, potete vedere che abbiamo AppDelegate.swift, ViewController.swift, e Main.storyboard.

2. Costruire l'interfaccia

La prima grande differenza che si nota quando si lavora con tvOS sta nel costrueire l'interfaccia utente della vostra applicazione. Quando si apre Main.storyboard, si vedrà un grande schermo vuoto di Apple. Se non è possibile vedere l'intero schermo nell'editor, allora premete Command-- zoommare diminuendo.

Questa schermata è significativamente più grande a causa del modo in cui le applicazioni tvOS sono scalate. Nel moderno sviluppo iOS, il layout dell'interfaccia viene gestito con l'uso di punti anziché dei pixel per rendere più semplice lo sviluppo su dispositivi con Retina Display.

Per esempio, l'iPhone 6 e l'iPhone 6s hanno una risoluzione dello schermo di 1334x750, ma solo una dimensione dello schermo, in punti, di 667x375. Ciò significa che tutte le applicazioni sul dispositivo vengono eseguite con scala 2x. Tutti i dispositivi di Apple iOS che hanno un display Retina girano a scala 2x, fatta eccezione per l'iPhone 6 Plus e iPhone 6s Plus, che funzionano ad una scala di 3x.

La nuova Apple TV, tuttavia, gestisce le applicazioni ad una risoluzione standard 1920x1080 ad una scala di 1x. Ciò significa che, quando si costruisce una applicazioni tvOS, le dimensioni dello schermo, in punti, che è necessario utilizzare quando si costruisce la vostra interfaccia è anche 1920x1080.

Ora che sapete come le tvOS applicazioni sono ridimensionate e visualizzate sullo schermo, possiamo iniziare a costruire la nostra prima interfaccia. Dalla Object Library a destra, trascinare su Button sul lato destro dello schermo vuoto. Con il pulsante selezionato, nella parte inferiore del vostro editor di storyboard, fare clic sul pulsante Pin e aggiungere i seguenti vincoli.

Successivamente, trascinate in un Table View alla sinistra del pulsante e aggiungete le seguenti constraints. Assicurarsi inoltre che l'opzione Update Frames sotto la parte inferiore è impostata su All Frames in Container. Date un'occhiata alla schermata qui sotto per chiarimenti.

Selezionate la tua vista tabellare, aprite Size Inspector, e impostate la proprietà Row Height a 88 come illustrato di seguito.

Successivamente, trascinare una Table View Cell dalla Object Library e aggiungetela alla vista tabellare. Con la table view cell selezionata, aprire il Attributes Inspector e modificate la proprietà di Style a Subtitle.

Infine, premete Control sulla tastiera e trascinate dalla tabel view al vostro view controller per impostare il controller view come origine dati della table view e delegate. È anche possibile eseguire questa operazione utilizzando la finestra di Connections inspector a destra.

Con la costruzione di questa interfaccia tvOS, vedrete che è quasi identica alla costruzione di una interfaccia di iOS con la differenza principale che gli elementi sono in scala molto più grandi.

3. Focalizzare la Comprensione

Vediamo ora di concentrarsi su un pò di codice. Aprire ViewController.swift e sostituire l'implementazione della classe UIViewController con il seguente.

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 3
    }
    
    func numberOfSectionsInTableView(tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .Subtitle, reuseIdentifier: nil)
        
        cell.textLabel?.text = "Item \(indexPath.row + 1)"
        cell.detailTextLabel?.text = "Subtitle \(indexPath.row + 1)"
        
        return cell
    }
}

Se si ha familiarità con lo sviluppo iOS, allora l'implementazione qua sopra dovrebbe apparire molto familiare. Ora siete pronti per eseguire la prima applicazione tvOS. Premete Command-R oppure fate clic sul pulsante di esecuzione in alto a sinistra. Assicuratevi che il dispositivo di test sia impostato su Apple TV 1080p.

Una volta che la Apple TV Simulator è avviato e l'applicazione è stata avviata, si dovrebbe vedere la seguente schermata:

Congratulazioni! Ora avete la vostra vera prima app tvOS attiva e funzionante. Al fine di controllare l'applicazione, è necessario utilizzare il nuovo telecomando Apple TV. Per portare il telecomando nel simulatore, selezionate Hardware> Show Apple TV Remote dal menu o premete ⌘Command + Shift + R.

Una piccola finestra remota dovrebbe aprirsi accanto alla finestra del simulatore. Provate con il telecomando tenendo premuto il tasto Option sulla tastiera e muovendo il cursore del mouse sul telecomando. Vedrete che, appena si sposta il cursore del mouse su e giù, la selezione table view cambia.

Allo stesso modo, quando si scorrere verso destra, il pulsante a destra viene selezionato.

Nello sviluppo tvOS, questo è chiamato cambiare l'elemento attivo corrente. A differenza delle app iOS dove gli utenti possono toccare un punto qualsiasi dello schermo in qualsiasi momento, le applicazioni tvOS utilizzano uno stile punta-e-clicca per l'interazione.

Non c'è bisogno di fare lavoro extra come sviluppatore per fare in modo che gli elementi della vostra interfaccia siano attivabili in un ordine logico. Il motore del focus incorporato nel framework UIKit su tvOS vede il layout dell'interfaccia e gestisce tutto il lavoro nello spostamento del focus da un elemento all'altro.

Ci sono, tuttavia, molti nuovi metodi e le proprietà messe a disposizione per controllare a livello di programmazione il focus gestita all'interno della vostra applicazione. Molti di questi sono definiti dal protocollo UIFocusEnvironment, con le classi UIViewController, UIView, UIWindow, a cui le classiUIPresentationController si conformamo automaticamente. Ci sono anche diversi metodi contenuti nelle versioni tvOS dei protocolli UITableViewDelegate e UICollectionViewDelegate che possono essere utilizzati per controllare il focus all'interno della vostra applicazione.

A titolo di esempio, stiamo andando rendere il pulsante a destra la voce attiva predefinita. Se si esegue l'applicazione ora, si vedrà che la prima voce della tabella ha inizialmente il focus. Andiamo anche a disabilitare la seconda voce nella vista tabella dall'essere attivabile. Aggiungete il seguente frammento di codice per l'implementazione della classe ViewController:

override var preferredFocusedView: UIView? {
    return self.view.subviews[0]
}

func tableView(tableView: UITableView, canFocusRowAtIndexPath indexPath: NSIndexPath) -> Bool {
    if indexPath.row == 1 {
        return false
    }
    
    return true
}

Per prima cosa sostituite la proprietà preferredFocusedView e tornate la prima sottovista, che attualmente è il pulsante sulla destra. La proprietà preferredFocusedView è di sola lettura e può essere impostata solo sovrascrivendo la sua implementazione, come abbiamo fatto. Quando viene caricato il controller della vista, il motore di focus troverà la vista restituita da questa proprietà e la metterà automaticamente a fuoco.

Abbiamo anche implementato il metodo tableView(_: canFocusRowAtIndexPath:) e restituiamo false quando la indexPath.row è pari a 1. Altrimenti torniamo true. Come ci si aspetterebbe, questo metodo delegato determina se una riga specifica può ricevere il focus.

Quando si generate ed eseguite nuovamente la vostra applicazione, vedrete che il pulsante a destra riceve automaticamente il focus al momento del lancio. Se il pulsante a destra non riceve automaticamente il focus, allora la vista gerarchica della vostra applicazione potrebbe essere leggermente diversa, cioè, la prima sottovista del controller della vista non è uguale al pulsante sulla destra.

Noterete anche che quando si cerca di navigare le righe della vista tabellare, la riga di mezzo viene saltata come voluto nella implementazione del metodo tableView(_: canFocusRowAtIndexPath:).

4. Componenti e Limitazioni delle App tvOS

Anche se non creeremo alcuna immagine in questo tutorial, è importante comprendere i diversi componenti necessari per le app tvOS, così come alcune delle loro limitazioni.

Icone delle App

Ogni app tvOS deve fornire due icone:

Large: 1280px x 768px
Small: 400px x 240px

La differenza principale con iOS è che le icone delle applicazioni tvOS possono essere composte da un massimo di tre strati (layers). E' così che si ottiene un effetto di parallasse nella schermata principale e in qualsiasi altro luogo appaia l'icona dell'applicazione. Se volete vedere questo effetto, andate nel Apple TV Simulator, premere il tasto Home sul telecomando (la piccola icona TV). Mettete il focus sull'icona Settings della app e tenete premuto il tasto Option mentre si sposta il cursore del mouse un pò in giro sul telecomando. Vedrete che l'icona dell'applicazione risponde al vostro movimento e diversi strati dell'icona produrranno un piacevole effetto.

Immagine di avvio

Proprio come una normale applicazione iOS, è necessario fornire un immagine statica da visualizzare una volta che la vostra applicazione è stata aperta e sta caricando. La differenza principale è che dovete solo fornire una singola immagine di 1920px x 1080px.

Immagini Top Shelf

Se l'applicazione è stata posta nella Top Shelf da un utente, quando aveva il focus, è possibile visualizzare i contenuti direttamente sulla schermata iniziale di Apple TV. Ci sono tre principali tipi di contenuti che è possibile visualizzare:

Static Image: Questa è solo l'immagine 1920px x 720px che fornite in bundle all'applicazione.
Dynamic Content Layouts: Questa è è dove visualizzate una serie di immagini in un'interfaccia simile ad una raccolta di viste. Queste immagini possono essere selezionate dalla vostra applicazione in qualsiasi momento e non devono essere incluse nel bundle dell'applicazione. Le tre dimensioni delle immagini che è possibile utilizzare sono 404px x 608px, 608px x 608px, e 908px x 512px. Possono essere utilizzate qualsiasi combinazione di queste tre dimensioni.
Scrolling Banner: Qui è dove viene fornita una serie di immagini dall'aspetto molto largo (wide screen) perché siano visualizzate uno accanto all'altra occupando la maggior parte dello schermo. Questo tipo di contenuto è simile alla pagina iniziale dello iOS App Store. Queste immagini devono avere dimensione 1940px x 624px.

Limitazioni

Nonostante la nuova Apple TV fornisca molto più spazio di archiviazione rispetto alla maggior parte dei dispositivi iPhone con una capacità minima di 32 GB, ci sono alcune limitazioni importanti per le applicazioni tvOS. In primo luogo, le applicazioni non possono avere più di 200MB di dimensione. Qualsiasi contenuto di cui abbiate bisogno oltre questo buffer di 200MB dovrà essere scaricato utilizzando la On-Demand Resources API introdotta con iOS 9 e ora tvOS.

Un'altra cosa di cui è necessario essere consapevoli è che le applicazioni tvOS non hanno una memoria locale persistente. Ciò significa che tutti i dati che è necessario mantenere tra i lanci di app, come salvare un gioco, una foto o un video, dovranno essere memorizzati sul icloud e recuperati in caso di necessità.

Conclusioni

Anche se non abbiamo scritto molto codice in questo tutorial, spero che vi sia servito come una buona introduzione alla piattaforma tvOS. Ora sapete le somiglianze e le differenze tra lo sviluppo delle applicazioni per iOS e tvOS e le limitazioni imposte agli sviluppatori.

Nei tutorial futuri, approfondiremo nella tvOS e scopriremo ciò che è possibile fare con tvOS e la nuova Apple TV.

Come sempre, lasciate i vostri commenti e feedback nei commenti qui sotto.