iOS da Zero con Swift: Creare la Tua Prima Applicazione iOS

Di cose ne abbiamo già imparate un bel po', in questa serie sullo sviluppo per iOS, ma sono sicuro che sei impaziente di iniziare a costruire un'app che faccia qualcosa di utile e fantastico. In questo tutorial il tuo desiderio verrà esaudito. Usando Xcode, stai per creare un progetto da zero, modificare il codice sorgente ed eseguire la tua applicazione sul simulatore o su un dispositivo fisico.

Introduzione di Colorific

Colorific è il nome dell'applicazione che stai per realizzare. L'idea che ci sta dietro è semplice: ogni volta che l'utente tocca lo schermo del dispositivo, il colore dello schermo cambia. Anche se il concetto è semplice, Colorific è perfetta per iniziare ed esplorare i pro e i contro dello sviluppo iOS.

1. Creare un Nuovo Progetto Xcode

Come abbiamo visto in precedenza, ogni applicazione iOS prende vita come progetto Xcode. Cos'è un progetto Xcode? E' un contenitore, o un archivio, che contiene file, risorse e informazioni richieste per compilare uno più prodotti.

Ricorda che non è limitato al solo sorgente del progetto e alle risorse, come immagini e altri media. Un progetto tiene anche traccia delle connessioni tra i vari elementi e sa come compilare il prodotto finale a partire da questi.

Lancia Xcode e crea un nuovo progetto Xcode scegliendo New > Project... dal menu File. Puoi farlo anche premendo Maiusc + Cmd + N.

Se, lanciando Xcode, viene fuori la finestra di benvenuto, ti propongo di chiuderla e di imparare a creare un nuovo progetto usando il menu.

2. Scegliere un Template per l'Applicazione

Iniziare con una nuova applicazione o un nuovo progetto è facile con Xcode grazie ai templates inclusi. Per quella che stiamo creando, abbiamo bisogno del template Single View Application. Sentiti libero di dare un'occhiata anche agli altri template, ma accertati di scegliere il template Single View Application per Colorific.

3. Configurare il Progetto

Dopo aver selezionato il template Single View Application e aver cliccato sul pulsante Next, Xcode ti presenta una lista di opzioni per configurare il progetto. Diamo un'occhiata alle varie opzioni.

• Product Name: sarà il nome della tua applicazione. Io l'ho chiamata Colorific, ma tu sentiti libero di chiamare la tua come meglio preferisci.
• Organization Name: può essere il tuo nome o quello della tua azienda. Xcode usa il nome dell'organizzazione per vari scopi, come aggiungere le informazioni sul copyright ad ogni file sorgente.
• Organization Identifier: è una stringa univoca che Xcode usa (insieme al nome del prodotto) per creare il bundle identifier dell'applicazione. Apple raccomanda di adottare la notazione del nome di dominio inversa per evitare casi di denominazioni identiche (naming collisions). Considera che il dominio che usi non ha legami col DNS (Domain Name System) Per esempio, la mia azienda si chiama Code Foundry BVBA e si trova in Belgio: l'identificativo sarà quindi be.codefoundry. Posso comunque usare anche be.code-foundry o com.codefoundry. Per lo scopo di questo tutorial, ho inserito, come identificativo, com.tutsplus.
• Bundle Identifier: anche se non puoi specificare il bundle identifier durante la creazione di un nuovo progetto Xcode, puoi modificarlo dopo averlo creato. Di default, il bundle identifier è la combinazione dell'organization identifier e del product name. Ricordati che gli spazi, nel nome del prodotto, vengono sostituiti con trattini, nel bundle identifier, perché quest'ultimo non può contenere spazi.
• Language: la versione corrente di Xcode supporta sia Objective-C che Swift. Questa serie si concentra sullo sviluppo con Swift 2.1 ed è per questo che che ho scelto tale opzione per il progetto.
• Devices: nella versione corrente di Xcode (7 al momento in cui scrivo), il selettore dei dispositivi contiene tre opzioni: Universal, iPhone e iPad. Questa opzione di configurazione dice a Xcode a quali dispositivi si rivolge. Selezionando la prima opzione, Universal, il tuo progetto si rivolge sia alle famiglie di dispositivi iPad sia a quelle iPhone. L'iPod Touch è un membro della famiglia di dispositivi iPhone, come avrai immaginato.
• Use Core Data: se selezioni questo checkbox, Xcode creerà alcuni file in più e aggiungerà po' di codice di riferimento per aiutarti a iniziare con il Core Data, il persistence framework di Apple OS X e iOS. Dato che il Core Data non è argomento per principianti, lasceremo questo checkbox non selezionato. 
• Include Unit Tests: l'attività di testing è un aspetto importante dello sviluppo software. Xcode ha un supporto integrato per il testing unitario. Per lasciare le cose semplici, per ora, ignoreremo questa opzione.
• Include UI Tests: Xcode 7 è la prima versione dell'IDE Apple che ha il supporto integrato per test sull'interfaccia utente. Questa è una cosa davvero importante per gli sviluppatori OS X e iOS. Tuttavia, il testing dell'interfaccia utente esula dalle finalità di questa serie.

A questo punto, dovresti avere una buona conoscenza delle differenti opzioni di configurazione per impostare un nuovo progetto Xcode. Per questo, ti consiglio di usare le opzioni come mostrato nell'immagine qui sopra. Considera che la maggior parte delle opzioni può facilmente essere modificata anche dopo la creazione del progetto. Clicca su Next quando hai terminato la configurazione.

4. Salvare il progetto

Nel prossimo step, Xcode ti chiede dove vuoi salvare il nuovo progetto. Forse hai notato quel piccolo checkbox in basso alla finestra con etichetta Create Git repository on My Mac. Il testo sotto il checkbox riporta: Xcode metterà il tuo progetto sotto un controllo di versione.

Come ho già accennato in precedenza, il controllo di versione è indispensabile per lo sviluppo software. Questa serie non tratta questo argomento in dettaglio, ma se fai le cose sul serio, allora ti raccomando caldamente di studiare il controllo di versione.

Git è il più popolare sistema SCM (Source Code Management - Gestore del Codice Sorgente) nella comunità Cocoa. E' comunque possibile usare un sistema SCM differente come SVN o Mercurial.

Indica a Xcode dove vuoi salvare il progetto, seleziona il checkbox per consentire a Xcode di creare il repository Git e clicca Create, in basso nella finestra di dialogo.

5. Esplorare l'Interfaccia Utente di Xcode

Prima di procedere, voglio dedicare alcuni minuti ad esplorare l'interfaccia utente di Xcode. E' composta da 4 aree distinte:

• una toolbar in alto
• una sidebar a sinistra
• una vista principale al centro
• una sidebar a destra

La Toolbar

La toolbar in alto contiene i pulsanti e i menu che ti ritroverai ad usare molto spesso. Come abbiamo visto in precedenza in questa serie, i pulsanti per eseguire e fermare un'applicazione si trovano anche nella toolbar.

Il display al centro è simile a quello che trovi in iTunes. Mostra informazioni relative allo stato del progetto o cosa sta facendo Xcode in background. Ti dice, ad esempio, quando una compilazione ha avuto esito positivo o è fallita.

I due gruppi di controlli sulla destra possono essere usati per personalizzare l'interfaccia utente di Xcode. Divertiti con i vari controlli per scoprire come ognuno di essi la modifica.

Il Navigatore

La funzione principale della sidebar di sinistra è la navigazione e ci si fa spesso riferimento col termine navigator di Xcode.

Il navigator ha diverse tab tra le quali, quella più a sinistra, il Project Navigator. La selezione nella sidebar di sinistra determina ciò che viene mostrato nella finestra principale di Xcode, il workspace.

Finestra Principale o Workspace

La finestra principale, o workspace, è l'area dove passerai la maggior parte del tempo. E' il mulo da soma di Xcode e mostra quello che è selezionato nel navigator.

Inspector

La sidebar di sinistra controlla ciò che viene mostrato nella finestra principale di Xcode che, a sua volta, determina il contenuto della sidebar di destra.

Questa sidebar, chiamata anche Inspector, si adatta a qualsiasi cosa l'utente selezioni nella finestra principale.

6. Esplorare il Progetto

E' venuto il momento di dare un'occhiata al progetto stesso. I suoi contenuti sono mostrati nel Project Navigator, la prima tab della sidebar di sinistra. Seleziona il primo elemento nel Project Navigator per vedere i dettagli del progetto nella finestra principale.

La finestra principale è composta da due sezioni, una sidebar sulla sinistra e una vista di dettaglio sulla destra. Nella sidebar, puoi vedere due voci: PROJECT, con un elemento e TARGETS, anch'esso con un elemento.

E' bene imparare il prima possibile la differenza tra project e target. Ricordi che un progetto è un archivio di file, risorse e dati che sono richiesti per compilare uno o più prodotti? Un target si riferisce a uno di questi prodotti. Un target contiene le istruzioni necessarie per compilare un prodotto con le risorse del progetto. Ciò significa che un progetto può contenere multipli target per compilare multipli prodotti. Come puoi vedere, un progetto Xcode è più di una semplice cartella con dei file all'interno.

7. Build & Run: primo tempo

Prima di iniziare a modificare il codice sorgente, potrebbe essere interessante compilare ed eseguire il tuo nuovo progetto per vedere cosa ci fornisce il template dell'applicazione. Clicca sul pulsante Run in alto a sinistra e assicurati che lo schema attivo sia configurato per eseguire l'applicazione nel simulatore selezionando iPhone 6 o un altro simulatore per iPhone.

Se tutto è andato per il verso giusto, il simulatore dovrebbe aver lanciato la tua applicazione e aver mostrato una vista bianca vuota con la consueta barra di stato in alto.

8. Modificare l'Interfaccia Utente

Sporchiamoci le mani e modifichiamo l'interfaccia utente dell'applicazione. Apri il Project Navigator e seleziona il file con nome Main.storyboard. Un file con estensione .storyboard è un file interfaccia utente. In questo file si crea l'interfaccia dell'applicazione.

Lo storyboard contiene un elemento: un view controller con una vista bianca, quella che hai visto nel simulatore qualche istante fa. Il workspace è composto da una sidebar che visualizza una rappresentazione a oggetti delle scene dello storyboard. La parte più larga del workspace contiene le scene o l'interfaccia utente dell'applicazione.

Seleziona l'oggetto che si chiama View, nella View Controller Scene, nella sidebar di sinistra e osserva come il workspace e la sidebar di destra aggiornano i loro contenuti. Un mucchio di tab appaiono nella parte alta della sidebar di destra. Ciascuna tab contiene una collezione di attributi relativi all'oggetto View.

La metà in basso della sidebar di destra contiene una sezione con 4 tab. La terza tab è rappresentata dall'immagine di un quadrato all'interno di un cerchio. Questo simbolo è usato per rappresentare gli oggetti in Xcode.

Seleziona la tab con l'icona del quadrato e scorri l'elenco che compare. Ci si riferisce a questo elenco con il nome Object Library e contiene diversi elementi per l'interfaccia utente, come button, slider, e switch.

All'inizio di questo tutorial, ti avevo detto che avresti realizzato un'applicazione funzionante. L'utente dovrebbe essere in grado di toccare lo schermo per cambiarne il colore.

Ci sono molteplici approcci per rilevare i tocchi in un'applicazione iOS. Una soluzione è quella di usare un button. Nella Object Library, trova l'elemento con nome Button e trascinalo dalla libreria alla vista nel workspace di Xcode.

L'utente dovrebbe essere in grado di toccare qualsiasi parte dello schermo, il che implica che il button deve coprire l'intero schermo. Hai notato gli otto piccoli quadrati posti ai bordi del button? Muovendo i piccoli quadrati, puoi modificarne le dimensioni. Regola la dimensione per fargli coprire lo schermo intero. Non ti preoccupare della barra di stato nella parte alta dello schermo.

La view dietro al button è quella che cambierà colore al tocco dell'utente. Al momento, il button non consente di vedere la view e dobbiamo quindi modificare i suoi attributi.

Forse hai notato che è stato aggiunto alla lista degli oggetti nella sidebar a sinistra, sotto l'oggetto View. Seleziona il button dalla lista degli oggetti e seleziona l'Attributes Inspector nella sidebar di destra—la quarta tab da sinistra. Abbiamo bisogno di due piccole modifiche.

Inizia cambiando il tipo di button da System a Custom. Questo lo farà diventare trasparente.

La seconda modifica necessaria è cambiare il titolo del button per dire all'utente cosa deve fare. Il campo di testo vicino all'etichetta Title riporta Button. Cambialo in Tap to Change Color e cambia il Text Color a nero per renderlo più leggibile.

9. Aggiungere un'Azione al View Controller

Se hai confidenza con il pattern MVC (Model - View - Controller) sei già a buon punto per imparare lo sviluppo iOS. Il pattern MVC si trova in diversi linguaggi e framework, come Laravel e Ruby on Rails.

La view nella nostra interfaccia utente ricade nella categoria V del pattern MVC. Una view è controllata da un controller. Dai un'occhiata ai nomi dei file nel Project Navigator sulla sinistra. ViewController.swift rappresenta un view controller che controlla la vista nella nostra interfaccia utente.

Cosa fa un view controller? Un view controller può fare quello che vuoi, ma è, prima di tutto, responsabile per la gestione di tutto quello che succede nella view ad esso collegata. Questo include, ad esempio, gli eventi touch da parte dell'utente. Se l'utente tocca il button nella view, la responsabilità di gestire questo evento è del view controller.

Come si gestisce un evento touch? Per il nostro button, aggiungiamo un'azione al view controller. Un'azione è un nome particolare per indicare un metodo. Cos'è un metodo? Un metodo è una funzione Swift. Aspetta. Cosa? Non preoccuparti troppo della terminologia a questo punto. I prossimi due articoli approfondiranno il linguaggio Swift. Ciò che ti server ricordare è che un metodo è come un metodo in Ruby o PHP, o una funzione in Javascript.

Se invochi un metodo nel view controller, lui fa qualcosa in risposta. In altre parole, se un utente tocca il button e noi creiamo una connessione tra un metodo e quell'evento touch, il view controller farà qualcosa in risposta all'evento.

Per aggiungere un'azione al view controller che gestisce la view nell'interfaccia utente dell'applicazione, abbiamo bisogno di fare qualche modifica al file ViewController.swift. Abbiamo solo bisogno di aggiungere un po' di linee di codice a ViewController.swift. Dai un'occhiata a come ho modificato il contenuto del file.

1

import UIKit

2

3

class ViewController: UIViewController {

4

5

    override func viewDidLoad() {

6

        super.viewDidLoad()

7

        // Do any additional setup after loading the view, typically from a nib.

8

    }

9

10

    override func didReceiveMemoryWarning() {

11

        super.didReceiveMemoryWarning()

12

        // Dispose of any resources that can be recreated.

13

    }

14

15

    @IBAction func changeColor(sender: UIButton) {

16

17

    }

18

19

}

Anche se non approfondiremo la sintassi in questo tutorial, è abbastanza facile capire cosa stia succedendo. Il nome dell'azione, o del metodo, è changeColor(_:) ed ha un solo parametro, sender. Il tipo di parametro è UIButton. Cos'è UIButton? Pazienza, giovane apprendista.

10. Implementare l'Azione

Abbiamo aggiunto un'azione al view controller, ma non fa un granché. Non ha ancora un contenuto. Per implementare l'azione changeColor(_:) abbiamo bisogno di aggiungere una o più righe di codice all'interno delle parentesi graffe, come mostrato nello snippet di codice qui di seguito. Non ti sto a spiegare ogni linea di condice nel dettaglio, ma cercherò di renderti l'idea di cosa succede.

1

@IBAction func changeColor(sender: UIButton) {

2

    // Generate Random Numbers

3

    let r = CGFloat(arc4random() % 255)

4

    let g = CGFloat(arc4random() % 255)

5

    let b = CGFloat(arc4random() % 255)

6

7

    // Create Color

8

    let color = UIColor(red: (r/255.0), green: (g/255.0), blue: (b/255.0), alpha: 1.0)

9

10

    // Update View

11

    view.backgroundColor = color

12

}

Come saprai, è possibile suddividere un colore nelle sue tre componenti primarie: rosso, verde e blu. Nella nostra azione, generiamo tre numeri a caso tra 0 e 255 e li usiamo per creare un colore casuale.

Il metodo che usiamo per creare il colore è abbastanza esplicito, init(red:green:blue:alpha). Con l'ultima linea del codice, impostiamo il colore dello sfondo della view a questo nuovo colore generato casualmente.

I commenti sono importanti quando si scrive del codice. Hai riconosciuto i commenti che ho aggiunto nell'implementazione di changeColor(_:)? I commenti su una sola riga iniziano con un doppio slash, //, mentre i commenti multiriga iniziano con /* e terminano con */.

11. Connettere l'Azione

Il metodo è implementato, ma non succederà nulla di spettacolare se compiliamo ed eseguiamo l'applicazione. Prova, se non mi credi.

Ciò che manca è una connessione tra il button e l'azione del view controller. Come potrebbe sapere, il view controller, che l'azione changeColor(_:) deve essere attivata quando il button viene toccato?

Realizzare questa connessione è semplice. Apri lo storyboard selezionando Main.storyboard e seleziona l'oggetto View Controller in View Controller Scene.

Con l'oggetto View Controller selezionato, apri il Connections Inspector, nella sidebar di destra—la prima tab da destra. Se hai seguito gli step correttamente, dovresti vedere l'azione che abbiamo creato nella sezione Received Actions.

Dovresti vedere un cerchio vuoto sulla destra dell'azione changeColor(_:). Clicca e trascina dal cerchio al button nella vista del view controller.

Appare un menu quando rilasci il mouse. Il menu contiene una lista di tipi di eventi touch. L'evento touch che ci interessa si chiama Touch Up Inside. Questo evento viene attivato quando un utente tocca il button e solleva il dito. E' il comportamento più comune per i pulsanti.

Dopo aver connesso il button con l'azione, dovresti notare che la sidebar di destra riporta la connessione che hai appena realizzato. Ottimo. Hai completato con successo la tua prima vera applicazione.

12. Build & Run: secondo tempo

Compila ed esegui la tua applicazione nel simulatore e inizia a fare tap sullo scermo del simulatore. Ogni volta che fai tap, il colore dello schermo dovrebbe cambiare in uno nuovo e casuale. Fantastico, vero?

Conclusioni

Abbiamo coperto grandi distanze in questo tutorial. Anche se questo articolo è stato abbastanza lungo, non ci abbiamo messo molto. Se conosci la teoria, puoi creare Colorific in meno di 5 minuti. Se incorri in qualche problema durante questo tutorial, scarica i file sorgenti da GitHub.

Nelle prossime due puntate esploreremo le basi del linguaggio di programmazione Swift. Questo ti preparerà ad affrontare le cose interessanti del resto della serie.

Per qualsiasi domanda o commento, puoi lasciarli qui di seguito o sul mio account Twitter.