Compatibile con Xcode 9

La prima applicazione iOS con il linguaggio Swift

ENTRA NEL NOSTRO GRUPPO FACEBOOK

Come si crea un’applicazione per iPhone, iPad o Apple Watch? Quali sono gli strumenti che devo conoscere e da dove devo cominciare?

Queste sono sono alcune delle domande che a qualsiasi nuovo sviluppatore iOS frulleranno per la testa. La risposta?

Due sono gli ingredienti che tutti dovremmo possedere prima di intraprendere il cammino dello sviluppatore. Gli strumenti di base (il linguaggio di programmazione Swift) e tanta, ma dico tanta, pazienza.

Chi si butta per la prima volta nel mondo dello sviluppo applicazioni iOS vuole tutto in pochissimo tempo. La programmazione ha dei tempi ben precisi. Tempi che servono al nuovo sviluppatore per immagazzinare tutte le migliaia di nozioni e regole che girano dietro un’applicazione ed un linguaggio di programmazione.

Vuoi creare la tua prima Applicazione iOS con il linguaggio Swift? Allora segui il mio consiglio:

Creare un'applicazione iOS è come costruire un palazzo. Devi partire dalle fondamenta! Condividi il Tweet

Per costruirlo si devono seguire dei passaggi canonici (fondamenta, pilastri, muri ecc) e, a meno che tu non possegga una squadra di operai giapponesi, non puoi tirarlo su in una sola notte.

Ok! io con le premesse ho finito. Tu sei pronto a cominciare quest’avventura?
Allora, vediamo insieme come creare la prima applicazione iOS con il linguaggio Swift.

La prima app

É ben noto ed è consuetudine che la prima applicazione, in qualsiasi linguaggio di programmazione, sia quella che scriva “Ciao Mondo” o “Hello World”.

La tua prima applicazione per iPhone, avrà al centro dello schermo un campo di testo (TextField), dove l’utente potrà inserire un messaggio o una parola. Mentre, in una Label (un campo di testo modificabile solo da codice), il messaggio verrà riportato nel seguente formato: “Ciao <Messaggio>”.

Non hai capito? Guarda un mini video dell’applicazione finale:

run-prima-applicazione-ios-e-linguaggio-swift

Che programma devo utilizzare per creare applicazioni iOS per iPhone e iPad?

Devi scaricare, dall’App Store, il programma Xcode. É gratuito e fornito da Apple. Se hai seguito il mio corso sul linguaggio Swift o sullo sviluppo di applicazioni iOS dovresti averlo già installato.

Creare il progetto iOS Single View con Xcode

Il primo step che devi eseguire è quello di aprire Xcode. Una volta aperto dovresti vedere una schermata di presentazione come quella presente nell’immagine qui sotto.

creare-unapplicazione-ios-con-linguaggio-swift-xcode

Ogni applicazione è l’insieme di più file. Tutti questi file sono racchiusi in una cartella che li identificherà e che prende il nome di progetto (Xcode project).

Data l’importanza, che ha per me, il saper progettare un’applicazione ho dedicato un intero articolo nel mio corso sullo sviluppo di applicazioni iOS.

Clicca su Create a new Xcode project o, se non ti dovesse comparire la schermata di presentazione, dal menu in alto clicca File\New\Project. Arrivato a questo punto, Xcode ti chiederà di scegliere un template.

Cos’è un Template in Xcode?

I template di Xcode

Un template è un progetto di partenza da cui poter iniziare a programmare la tua prima applicazione iOS con il linguaggio Swift.

Immaginalo così. Xcode ti fornisce il quaderno. Il tuo compito è quello di provvedere a riempirlo. Senza il template, o senza il quaderno, avresti dovuto crearlo da zero (tagliare l’albero ecc, un processo non alla portata di tutti).

Dato che la tua prima applicazione iOS sarà composta da una sola pagina o Viewseleziona il template Single View Application e clicca su Next:

selezione-template-single-view-application-xcode

Le opzioni

A questo punto, Xcode dovrebbe guidarti in un’altra finestra di impostazioni:

opzioni template xcode

Datemi un nome e vi conquisterò l’App Store.

Scherzi a parte, anche se il nome è uno dei motivi di successo di un’applicazione, in questa finestra dovrai riempire i seguenti campi:

  • Product NameIl nome che vuoi assegnare alla tua prima applicazione iOS con il linguaggio Swift.
  • Organization Name: Se lavori per un’azienda o hai un sito web, qui puoi inserirlo. Se non hai nessuno dei due, metti il tuo nome. In pratica è il nome che comparirà nell’App Store come sviluppatore dell’app.
  • Organization Identifier: É una stringa identificativa della tua applicazione. Puoi, ad esempio, mettere il nome della tua organizzazione, la combinazione tra il tuo nome e l’azienda o sempre il tuo nome. Serve ad Apple per identificare lo sviluppatore dato che potrebbero esserci più sviluppatori con lo stesso Organization Name.
    • Generalmente si utilizza la domain reverse notation. Cioè se hai un sito, dovrai scriverlo al contrario, esempio: it.xcoding

Come Language seleziona il linguaggio Swift e come Devices iPhone. Vedrai più avanti o seguendo il mio corso che puoi creare un progetto Universal. I progetti Universal ti permettono di creare applicazioni che vanno bene sia per iPhone che per iPad.

I tre checkbox che trovi, deselezionali tutti.

Premi Next. Il passaggio successivo ti porta a scegliere il luogo in cui salvare il progetto. Scegli un posto nel tuo Mac e premi su Create.

Storyboard e interfaccia

L’interfaccia di Xcode, che dovresti avere davanti ai tuoi occhi, è leggermente (ma poco, poco) incasinata. É formata da 5 sezioni le quali hanno un compito ben specifico.

interfaccia Xcode. Le aree di lavoro

Dato che finirei per annoiarti, quando hai finito di seguire questo tutorial, puoi leggerne di più sull’interfaccia di Xcode qui.

Ma torniamo a noi. É arrivato il momento di creare l’interfaccia.

Aspetta Peppe… io non sono un grafico, come farò a creare un’interfaccia per la mia prima applicazione iOS?

Non abbandonare proprio ora, costruire una User Interface (UI) sarà un gioco da ragazzi con Xcode.

Seleziona il file Main.Storyboard. Lo trovi nella colonna a sinistra chiamata Project Navigator. All’interno del Main.storyboard troverai l’Interface Builder, ovvero lo strumento che utilizzerai per la realizzazione delle interfacce (inserire bottoni, immagini, menu, altre finestre ecc).

Ciao_Mondo_xcodeproj

Qui incappano tutti gli inesperti!

Con l’Interface Builder creerai solamente la grafica della tua applicazione. Sarà tuo compito generare il codice relativo a quel determinato oggetto che hai piazzato nella View (sotto vedrai come si fa).

Al centro dell’Interface Builder hai un ViewController. Questo è un contenitore nel quale potrai inserire tutti gli elementi dell’interfaccia della tua applicazione. Se apri una applicazione tutto lo schermo con tutto il contenuto prende il nome di ViewController.

viewcontroller-e-interface-builder

Inoltre, possono esistere più ViewController in base al numero di “viste” che la tua applicazione avrà. Per esempio, se premi un bottone e vedi cambiare totalmente il contenuto degli elementi, molto probabilmente stai passando ad un altro ViewController dell’applicazione. Una volta finito con questo tutorial puoi approfondire questi concetti qui: Passare da un ViewController all’altro.

Sei confuso? Non preoccuparti, è un buon segno. Man mano imparerai a prendere dimestichezza con Xcode.

Gli elementi grafici

Per creare un Hello World hai bisogno di una Label (un contenitore non cliccabile, utilizzato solo per le scritte e numeri). Puoi selezionare un oggetto Label dall’Object Inspector che trovi in basso a destra. 

Una volta posizionata al centro della View (che è il contenitore reale degli elementi grafici), fai doppio click su di essa e rinominala in “Inserisci il tuo nome”.

Sotto la label trascina una Text Field (uno strumento che permette l’inserimento dei dati):

inserire-oggetti-grafici-nel-view-controller-storyboard

Collegare il codice all’interfaccia

Ora viene il bello!

L’interfaccia contenuta nella View (View e ViewController non sono sinonimi) non esegue operazioni se alle spalle non ha un codice collegato che la gestisce (Il ViewController è il reale gestore della View, se vuoi approfondire dai uno sguardo al mio corso di sviluppo iOS).

Per poter collegare in modo intuitivo, il codice con l’interfaccia, Xcode mette a disposizione uno strumento chiamato Assistant Editor. L’Assistant Editor ti da la possibilità di lavorare su due pagine. Per poter aprire l’Assistant, in alto a destra sono presenti sei bottoni divisi in due gruppi da tre.

opzioni di layout xCode 6

Clicca il pulsante nel mezzo del primo gruppo, in questo modo attiverai l’Assistant Editor. Nel secondo menu disattiva la 1 e la 2 opzione, così non avrai le due colonne a disturbarti. Il tuo Xcode dovrebbe mostrarti qualcosa simile a questo:

assistant-editor-xcode

Nella finestra a sinistra trovi lo storyboard mentre nella finestra di destra il file ViewController.swift.

Il ViewController è la classe che gestisce la View e potenzialmente tutti i suoi elementi all’interno. Si chiama Controller proprio per questo motivo. Il file ViewController.swift è stato creato in automatico da Xcode perché frutto della selezione del template Single View Application.

Quindi la classe ViewController, contenuta nell’omonimo file, gestisce la grafica del ViewController presente nello Storyboard. I nomi sono uguali perché, per l’appunto, fa riferimento al nome della classe.

Nei prossimi tutorial scoprirai come utilizzare gli altri tipi di ViewController e come meglio lavorarci. Per ora devi concentrarti sui concetti basilari.

Seleziona la Label e tenendo premuti CTRL + CLICK (ctrl+tasto sinistro mouse) trascina la linea dalla prima finestra verso la seconda. Precisamente deve cascare dentro il codice racchiuso tra le parentesi graffe della classe ViewController:

collegare un elemento della storyboard al codice xCode 6

Appena rilasciato il click si aprirà un menu che ti aiuterà nella creazione del collegamento.

L’unica cosa che devi settare, in questo caso, è il nome del collegamento che gestirà la label presente nell’interfaccia. Chiama la connesione nameLabel. Una volta assegnatogli il nome, premi Connect:

connettere un label al codice xCode 6

La connessione genererà questo codice

condividi xcoding

Se cominci a vedere il fumo uscire dal tuo Mac o da te, prenditi una pausa. Fermati 10 minuti, fai una partita a League of Legends, cazzeggia o fai quello che ti pare.

Quando torni e se ti va, puoi sempre iscriverti alla nostra newsletter per rimanere aggiornato.

Cos’è una IBOutlet e IBAction?

IBOutlet sta letteralmente per Interface Builder Outlet (connessione Interface Builder) serve a far capire ad Xcode che questa variabile è nata per connettere un elemento dell’interfaccia al codice.

IBAction (che vedrai più sotto) sta per Interface Builder Action crea delle funzioni che nascono per gestire il comportamento o gli eventi degli elementi grafici.

Se già variabili, classi e funzioni ti suonano come nuovi è perché ti mancano le basi della programmazione. Puoi provvedere cominciando a seguire il corso gratuito sul linguaggio swift.

Le Action vengono invocate (“chiamate”) quando viene generato un particolare evento. Ad esempio quando viene premuto invio dalla tastiera o quando viene cliccato un bottone si dice che è stato lanciato un evento, questo evento può essere intercettato per eseguire delle particolari azioni.

Nel nostro caso intercetteremo l’evento di scrittura nella TextField per poter recuperare il testo inserito dall’utente e modificare, contemporaneamente, la label. Se ti va di approfondire in modo dettagliato puoi seguire il mio corso di sviluppo applicazioni iOS con il linguaggio Swift.

Connettere la TextField al codice

Crea l’ultima connessione tra il TextField e codice. Dato che dovrai intercettare l’evento di scrittura, devi modificare alcune impostazioni della finestra di connessione.

Quindi, la TextField non si connetterà passivamente con una IBOutlet, bensì eseguirà delle azioni che verranno gestite dalla IBAction.

Il Name, questa volta, non rappresenterà il nome della TextField bensì la funzione che verrà invocata ad ogni evento. Pertanto rinominala in helloWorld_editingChangedCambia i dati della finestra di connessione nei seguenti:

ibaction-e-xcode

Una volta che avrai cambiato la Connection, da Outlet a Action, si apriranno altre impostazioni.

  • Event: è il nome dell’evento che viene intercettato dalla IBAction. Nel tuo caso sarà un evento di tipo Editing Changed. In questo modo ogni qual volta inserirai del testo nella TextField la funzione helloWorld_editingChanged verrà invocata.
  • Type: é l’oggetto che scaturisce l’evento. Dato che è una UITextField (User Interface Text Field), cambialo nell’omonimo dato.

Una volta connesso, il codice che dovresti avere è:

La modifica del testo

L’ultima cosa da fare a livello di programmazione è inserire il codice all’interno del funzione helloWorld_editingChanged. La funzione dovrà modificare il testo della nameLabel scrivendo “Ciao” + il testo contenuto nella textField:

L’evento Editing Changed, ogni volta che l’utente immetterà un carattere nel campo di testo, invocherà il metodo helloWorld_editingChanged che, a sua volta, modificherà il testo della nameLabel.

UILabel e UITextField sono entrambi delle classe. Puoi investigare meglio le loro proprietà e metodi, leggendo la documentazione ufficiale Apple:

Build & Run

Ora non ti resta altro che premere Run (il triangolo in alto a sinistra per l’avvio dell’applicazione) per vedere in azione la tua prima applicazione iOS con il linguaggio Swift:

run-prima-applicazione-ios-e-linguaggio-swift

Considerazioni e Download del progetto

Il tutorial è abbastanza superficiale e comprensibile (spero!) anche per chi non ha delle conoscenze di background. Ad ogni modo se hai avuto qualche problema o vuoi semplicemente scambiare due chiacchere (o un ringraziamento/critica) lascia pure un commento.

Se già conosci il linguaggio Swift, ti indirizzo ai prossimi tutorial:

Se invece vuoi seguire un percorso più dettagliato, puoi acquistare il corso di sviluppo applicazioni iOS con il linguaggio swift.

Download

Se il tuo progetto non dovesse funzione per qualche oscuro motivo, di seguito puoi scaricare quello fatto da me e confrontarlo con il tuo:

Download Dropbox

Changelog

  • 21/03/2018 – Aggiornamento del tutorial ad Xcode 9 e Swift 4
  • 17/09/2016 – Creazione changelog, modifica e correzione del testo. Aggiornamento ad Xcode 8 e Swift 3.

Buona Programmazione!

Start typing and press Enter to search

auto-layout-in-xcode-la-guida-definitiva