Sei pronto a realizzare la tua prima applicazione per iOS con Swift? Questo è il primo progetto per creare App iOS con Swift del mio corso pensato per i principianti, che ti insegnerà a sviluppare app iOS in Swift senza avere nozioni base di programmazione. Per avere una panoramica generale sul corso e per scoprire l’indice degli argomenti trattati, ti consiglio di leggere l’introduzione al seguente link.

In questo primo progetto per creare app iOS con Swift, realizzeremo un’applicazione che mostra una lista di immagini. Selezionando ognuna di esse sarà possibile visualizzarla a tutto schermo. Un po’ come fa l’applicazione Foto di iPhone. Con questo progetto inizierò a spiegarti anche alcune nozioni base di Swift e dell’ambiente id sviluppo di iOS. Questo sarà il risultato finale.

Sei pronto? Allora non perdiamo altro tempo ed iniziamo subito partendo con il primo progetto per creare App iOS con Swift.

Progetto 1: Image Viewer

Installazione di Xcode

Probabilmente questo è il tuo primo progetto per programmare app con Swift, quindi ci sono un paio di configurazioni da fare prima di partire. La prima cosa di cui hai bisogno è Xcode. Se non conosci questo strumento, devi sapere che Xcode è un ambiente di sviluppo realizzato da Apple. Se non sai cos’è un ambiente di sviluppo (o IDE), devi pensarlo come un programma che contiene una serie di strumenti che ti permettono di sviluppare software per una specifica piattaforma.

Nel caso di Xcode, questo strumento offre un insieme di tool che permettono di realizzare applicazioni per iOS, macOS, tvOS e watchOS (tutti i sistemi operativi di Apple). Xcode è un programma disponibile solo per Mac e puoi scaricarlo direttamente dal Mac App Store. È completamente gratuito. Essendo un programma molto corposo, ci vorrà del tempo per completare il download e la sua installazione.

Quando è tutto pronto, puoi procedere con la guida.

Configurazione del progetto

Dopo avere installato Xcode, sei pronto per realizzare la tua prima applicazione per iOS. Avvia Xcode e seleziona la voce Create a new Xcode Project. Ti verrà mostrato una serie di template. Seleziona Single View App e poi clicca su Next.

Creare App iOS con Swift - Progetto 1_1

Nella nuova pagina che si apre devi inserire alcune informazioni relative all’applicazione. Nel campo Product Name: puoi scrivere Progetto 1. Solitamente in questo campo viene inserito il nome della tua applicazione. Puoi sempre modificare questa voce anche a progetto in corso. In Organization Name: digita il tuo nome. Organization Identifier: è un identificativo unico che serve a contraddistinguere la tua applicazione. Non possono esistere due applicazioni con lo stesso identificativo.

Per lo scopo di questo corso, puoi digitare anche il tuo nome in questo campo. Tieni a mente, però, che quando pubblicherai la tua prima applicazione, dovrai inserire un nome univoco. Solitamente viene digitato il dominio del sito web di supporto all’app scritto in ordine inverso. Nel mio caso ho inserito com.guideitech. Assicurati che nel campo Language: sia selezionato Swift. Gli ultimi tre campi puoi lasciarli deselezionati. Al momenti non li utilizzeremo. In un prossimo progetto ti spiegherò a cosa servono.

Creare App iOS con Swift - Progetto 1_1

Cliccando su Next ti verrà chiesto dove salvare il nuovo progetto. Per comodità ti consiglio di creare una cartella dove andare ad inserire questo e tutti i progetti futuri del corso.

Bene! Sei pronto ad avviare la tua prima app. Si, hai capito bene. Non hai ancora scritto una riga di codice ma il progetto appena creato è già funzionante. In alto a sinistra, di fianco alla scritta Progetto 1, seleziona su quale dispositivo vuoi lanciare l’app. Puoi selezionare un iPhone o iPad simulato da Xcode, oppure selezionare il tuo dispositivo personale (che devi collegare al Mac tramite cavo Lightning). Ti consiglio di selezionare un dispositivo simulato (ad esempio iPhone 8). Quando tutto è pronto, clicca sul tasto Run (il tasto a forma di triangolo in alto a sinistra). Partirà il simulatore dell’iPhone. Quello che vedi in questo momento è una schermata bianca. È tutto normale. D’altronde non hai ancora scritto del codice per dire all’app quello che deve fare.

Ma perché è già possibile avviare il progetto? Ogni nuovo progetto creato tramite Xcode contiene già del codice di supporto scritto da Apple, necessario ad avviare qualsiasi app. Se non crei le tue applicazioni con Xcode, tutto questo codice dovrai scriverlo tu a mano. Una gran bella fatica, te lo posso assicurare. Per questo motivo è importante utilizzare un IDE per sviluppare app. In questo modo lo sviluppatore può concentrarsi su quello che è realmente importante al funzionamento della propria app. Se hai configurato tutto correttamente, possiamo procedere a scrivere la nostra prima app iOS in Swift.

SUGGERIMENTO: per avviare la tua app nel simulatore oppure sul tuo dispositivo iOS, puoi utilizzare la comoda combinazione di tasti cmd + R.

Come detto in precedenza, in questa applicazione che andiamo a sviluppare, verrà data la possibilità di visualizzare delle foto. Per questo motivo devi importare alcune immagini all’interno del progetto. A tale scopo, puoi trovare tutte le risorse di questi e dei futuri progetti a questo link. Scarica l’intero pacchetto e poi estrai l’archivio appena scaricato. All’interno troverai una cartella chiamata Progetto 1 – Risorse, contenente un’ulteriore cartella chiamata Risorse con una serie di immagini. Trascina la cartella Risorse all’interno di Xcode e rilasciala sotto il file Info.plist presente nella barra laterale destra.

Creare App iOS con Swift - Progetto 1_1

Si aprirà una finestra che ti chiederà cosa vuoi fare con i file che stai importando. Assicurati che i campi Copy items if needed e Create groups siano selezionati. Clicca su Finish per procedere. Assicurati di non selezionare Create folder references, altrimenti il tuo progetto non funzionerà.

Creare App iOS con Swift - Progetto 1_1

Bene! A questo punto siamo pronti per mettere mano al codice ed iniziare ad imparare a sviluppare applicazioni per iOS con Swift. Fino ad ora hai creato il tuo primo progetto in Xcode ed hai importato delle risorse all’interno dell’ambiente di sviluppo. Inoltre hai lanciato la tua prima app sia all’interno del simulatore che sul tuo dispositivo iOS.

Pronto? Proseguiamo.

Accedere alle risorse importate nel progetto: come utilizzare il FileManager

Le immagini che hai caricato all’interno del progetto verranno incluse nell’app da Xcode quando essa verrà caricata sull’App Store. In questo momento, per comodità, Xcode ti mostra tutte le risorse esterne come immagini, video o altri tipi di file suddivisi per cartelle. Dietro le quinte, in realtà, questi contenuti si trovano in speciali cartelle che prendono il nome di Bundle. Per poter accedere ad una specifica risorsa, dobbiamo chiedere al sistema operativo dove questa è stata memorizzata. In questo modo possiamo utilizzarla all’interno della nostra applicazione.

Prima di iniziare a visualizzare le immagini che hai importato nel progetto, bisogna imparare ad accedere alle risorse esterne che decidiamo di importare nell’app. Per questo motivo ora ti mostrerò come fare. Lo scopo di questa parte della guida è quello di mostrare una lista di nomi. Ogni elemento della lista corrisponderà al nome del file che hai importato in precedenza. Questa prima fase è utile per iniziare a prendere confidenza con l’ambiente di sviluppo.

Il primo passaggio è quello di aprire il file chiamato ViewController.swift che trovi nella barra laterale sinistra. Per aprirlo ti basterà cliccare una sola volta su di esso. Come puoi notare, è già presente del codice all’interno di questo file. Non è molto, ma è quanto basta per mostrare la schermata bianca che hai visualizzato in precedenza quando hai lanciato l’applicazione. Dovresti vedere qualcosa simile a questo:

Creare App iOS con Swift - Progetto 1_1

Da questo pezzo di codice vorrei che ponessi l’attenzione su alcuni aspetti importanti:

  • Il primo comando presente all’interno del file è import UIKit. Esso è fondamentale in quanto permette di importare (per utilizzarli nel progetto) tutti gli strumenti di base legati all’interfaccia grafica realizzati da Apple (UIKit è una libreria o framework ).
  • Continuando nella lettura del file trovi la linea class ViewController: UIViewController. Volendo semplificare il concetto, in questa riga di codice stai creando una nuova schermata chiamata ViewController che ha come base uno UIViewController. Un UIViewController è l’elemento primario proposto da Apple per creare una nuova schermata. Vedrai spesso degli elementi che iniziano per UI. Essi fanno tutti parte di UIKit che, come detto al punto precedente, è un insieme (il gergo tecnico è libreria) di elementi di interfaccia grafica.
  • Procedendo nella lettura del codice ti puoi imbattere in override func viewDidLoad(). Questa linea viene utilizzata per definire una funzione (o metodo), che è un blocco di codice che viene eseguito all’interno della tua schermata. Non tutte le funzioni iniziano per override. Questa parola chiave viene utilizzata per modificare il comportamento di una funzione che è già stata definita dal qualcun altro. In questo caso stiamo andando a modificare il comportamento della funzione viewDidLoad(), che è una funzione definita da Apple. Essa viene chiamata automaticamente ogni volta che la schermata è stata caricata ed è pronta per essere visualizzata.
  • Scorrendo nella pagina puoi notare come venga ridefinita un’altra funzione: override func didReceiveMemoryWarning(). Questo metodo viene chiamato dal sistema operativo quando lo smartphone dispone di poche risorse. In questa funzione lo sviluppatore è invitato da Apple a rilasciare risorse non più necessaria dalla RAM, in modo da alleggerire l’esecuzione dell’applicazione.
  • Puoi notare come ogni funzione propone delle parentesi graffe { }. All’interno di esse devi scrivere il codice legato ad una determinata funzione. Lo scopo primario è quello di delimitare una funzione.
  • Infine vorrei farti notare altre due cose. La funzione viewDidLoad() contiene la linea di codice super.viewDidLoad() ed un commento. I commenti sono facilmente riconoscibili perché sono colorati di verde ed iniziano per //. Ma cosa significa super.viewDidLoad()? La parola chiave super viene usata nei metodi che vengono ridefiniti tramite override per dire al sistema operativo che prima di eseguire il codice da noi scritto, deve essere eseguito il codice che è stato definito originariamente nella funzione.

Non hai ancora scritto una riga di codice ma ho già dovuto spiegarti un po’ di cose. Ma non preoccuparti, non sono concetti complessi e presto diventeranno familiari anche a te, in quanto li ritroverai spesso durante lo sviluppo di un’app.

Va bene, iniziamo a scrivere il codice! Come ti ho detto in precedenza, il nostro primo obiettivo è quello di andare a recuperare le immagini che abbiamo importato in precedenza. Per farlo dobbiamo utilizzare il FileManager. Se ben ricordi, la funzione viewDidLoad è la prima cosa che viene eseguita quando viene caricata la vista. Perciò andremo a scrivere il nostro codice qui dentro. In questo modo saremo sicuri che il nostro blocco di codice verrà eseguito durante l’utilizzo dell’app. Subito dopo la linea super.viewDidLoad() scrivi quanto segue:

Creare App iOS con Swift - Progetto 1_1

Vediamo insieme cosa fanno queste righe di codice che abbiamo appena scritto:

  • la parola let viene usata in Swift per definire una costante. Nel nostro caso, abbiamo creato una costante chiamata gestoreFile ed abbiamo assegnato ad essa il valore ritornato da FileManager.default, che non è altro che un tipo di dato che lavora per noi con il filesystem. Ci servirà per accedere ai dati che abbiamo caricato in precedenza.
  • Nella riga successiva abbiamo dichiarato una seconda costante chiamata percorso. Ad essa è stata assegnata il percorso dove si trovano i nostri dati.
  • La linea di codice let elementi = try! fm.contentsOfDirectory(atPath: path) dichiara una terza costante chiamata elementi alla quale abbiamo assegnato il nome dei file che sono contenuti nella cartella che si trova al percorso indicato nella costante percorso. Come hai potuto notare in queste poche righe di codice, Apple è solita dare nomi auto-esplicativi alle sue funzioni. Sembra quasi un testo scritto in inglese. Il contenuto della costante elementi è chiamato array. Un array è un insieme di dati (o collezione). Nel nostro caso abbiamo un insieme di nomi di tutti i file che abbiamo caricato nella nostra app e non solo.
  • Se prosegui nella lettura puoi leggere la riga for elemento in elementi {. Questa linea di codice dichiara un ciclo (o loop). I cicli sono blocchi di codice che vengono eseguiti più volte. Nel nostro caso, il ciclo viene eseguito per ogni elemento che è presente nel filesystem della nostra app. Fai caso al fatto che il ciclo si apre con una parentesi graffa e si chiude con un’altra parentesi graffa. Tutto ciò che è contenuto tra queste parentesi viene eseguito dal ciclo. Ma cosa fa nel dettaglio la linea di codice ****for elemento in elementi*? In pratica possiamo tradurre questo pezzo di codice come: “tratta elementi come un insieme di stringhe, poi estrai, in sequenza, ognuna di queste stringhe, assegnala a elemento ed esegui il blocco di codice*”. Questo processo viene eseguito n volte, con n che è il numero di elementi che sono presenti all’interno di elementi.
  • if elemento.hasPrefix(“immagine-”) { è la prima linea di codice del ciclo. All’interno della variabile elemento è presente il primo nome del file contenuto nel filesystem dell’applicazione. Quello che vogliamo fare è mostrare un elenco di nomi corrispondenti alle immagini che abbiamo caricato. Dato che nel filesystem potrebbero esserci anche altri tipi di file, dobbiamo filtrare gli elementi contenuti nella costante elementi. Sicuramente hai notato che le immagini che ti ho fatto caricate nell’app iniziano tutti nello stesso modo: immagini-. Non è un caso. Grazie a questo espediente possiamo filtrare facilmente i file. Il metodo hasPrefix si occupa di controllare se la stringa contenuta in elemento inizia per una data stringa che dobbiamo passare noi. Nel nostro caso abbiamo passato al metodo la stringa immagine-. Se la stringa contenuta in elemento inizia per immagine-, allora il metodo ritorna true (vero). In caso contrario, il risultato sarà false (falso). La parola if che trovi all’inizio della linea di codice si chiama condizionale: se quanto scritto dopo la parola if è vero, allora viene eseguito il blocco di codice che segue, altrimenti tutto il blocco viene saltato. Anche in questo caso, il blocco di codice collegato al condizionale if è racchiuso tra parentesi graffe.
  • Infine, //questa è una immagine da caricare è un commento. Al momento non abbiamo scritto del codice all’interno del blocco condizionale. Lo faremo tra poco.

Quindi la prima cosa che facciamo è andare a prelevare il nome delle immagini caricate e salvarle in una costante. Per fare questo abbiamo bisogno del FileManager e del percorso all’interno del quale si trovano i file. Poi andiamo a ciclare su tutti i nomi dei file e tramite un blocco condizionale controlliamo se il nome del file inizia con la stringa immagine-. Se questa condizione è vera allora può essere eseguito un ulteriore blocco di codice, altrimenti si procede con il ciclo.

Più nel dettaglio:

  • Per definire una costante usiamo la parola let. Le costanti sono pezzi di codice che sappiamo non muteranno mai nel tempo.
  • I testi in Swift sono rappresentati usando il tipo di dato String.
  • Le collezioni sono chiamate array e spesso contengono un solo tipo di dato. Per rappresentare un array di stringhe si utilizza il formato [String]. Una costante che è stata dichiarata in questo modo può contenere solo un array che al suo interno presenta delle stringhe come elementi. Se provi ad inserire ad esempio un numero in un array dichiarato come stringa, ricevi subito un messaggio di errore.
  • Fino ad ora non ti ho spiegato cosa significa la parola try!. Questa parola chiave è da intendere come il seguente pezzo di codice potrebbe fallire (ad esempio la cartella che stiamo cercando potrebbe non esistere). Ma noi siamo certi che esso non fallirà. Qualora dovesse fallire, l’applicazione subirà un crash.
  • Per poter ciclare su un insieme di dati (array) puoi usare for unElemento in insiemeDiElementi. Swift si occuperà di inserire ogni elemento di insiemeDiElementi nella variabile unElemento, così che tu possa usare il dato all’interno del blocco del ciclo.

Se sei stato attento, avrai notato che c’è ancora una piccola cosa che non ti ho spiegato. È un concetto un po’ ostico, almeno all’inizio. Perciò cercherò di renderlo il più semplice possibile. Ci sarà tempo per approfondire l’argomento.

Ad un certo punto ho utilizzato il punto esclamativo. Esattamente in questo punto: Bundle.main.resourcePath!. Non è stato un errore. Se lo togli, il codice che hai scritto non funzionerà. Per Swift i punti esclamativi sono importanti. Questo linguaggio di programmazione ha tre modi diversi di lavorare con i dati:

  • Una variabile o una costante contiene un dato. Per esempio, dato: String è una variabile che contiene un dato di tipo stringa.
  • Una variabile o una costante potrebbe contenere un dato, ma non ne siamo sicuri. In questo caso stiamo parlando di un tipo opzionale e può essere rappresentato come dato: String?. Non puoi usare direttamente questo dato ma devi prima chiedere a Swift se la variabile contiene o meno un dato.
  • Una variabile o una costante potrebbe contenere un dato, ma noi siamo certi al 100% che il dato esista. In questo caso, per accedere al dato senza chiedere a Swift se esso esiste, possiamo implicitamente accedere al dato usando il punto esclamativo: dato: String! So bene che quanto ti ho spiegato potrebbe averti confuso un po’. Anche io lo ero, ma utilizzando spesso le variabili e le costanti opzionali, presto capirai come gestirle al meglio.Applicando questo concetto al nostro caso, Bundle.main.resourcePath potrebbe oppure non potrebbe ritornare un percorso (quindi il dato di ritorno è String?). Ma noi sappiamo che questo percorso esiste al 100%, perciò vi accediamo direttamente utilizzando il punto esclamativo.

ATTENZIONE: il punto esclamativo è chiamato da molti l’operatore dei crash. Questo perché non è molto sicuro utilizzarlo. Infatti, se utilizziamo un punto esclamativo su una variabile che non contiene un dato (quando una costante o variabile non contiene un dato, allora essa è nulla. Si utilizza nil per definire una variabile nulla), l’applicazione andrà in crash. Ti spiegherò più avanti come gestire al meglio gli opzionali.

Il prossimo passaggio consiste nel creare un nuovo array ed andare ad inserire all’interno di esso solo i nomi dei file che iniziano per immagine-. In questo modo potremo fare riferimento direttamente alle nostre immagini quando ne avremo bisogno. Le tre costanti che abbiamo creato (gestoreFile, percorso ed elementi) vivono all’interno del metodo viewDidLoad() e verranno distrutte appena il metodo finisce. Quello che vogliamo è collegare i nostri dati al ViewController, in modo tale che essi esistano per tutto il tempo che la schermata collegata al ViewController è visibile. Per fare ciò, in Swift possiamo usare le proprietà (o properties). Possiamo dichiarare quante proprietà vogliamo e leggere e scrivere su di esse in ogni momento, almeno fino a quando la schermata esiste.

Per creare una proprietà, devi dichiararla all’esterno di ogni metodo. Fino ad ora abbiamo dichiarato solo costanti. Ma l’array di cui abbiamo bisogno deve mutare nel tempo, perciò dovremo definirlo come una variabile. Dovremo anche dire a Swift quale sarà esattamente il tipo di dato che vogliamo inserire all’interno della variabile. A noi serve un array di stringhe dove andare ad inserire il nome delle immagini che abbiamo caricato. Aggiungi questa linea di codice prima del metodo viewDidLoad():

var immagini = [String]()

Creare App iOS con Swift - Progetto 1_1

LA parola chiave var è usata per definire una variabile. Ora è interessante capire cosa fa [String](). [String] significa che la variabile deve essere di tipo array di stringhe. Le parentesi tonde invece significano crea ora un array di stringhe vuoto.

La variabile immagini verrà create appena la schermata ViewController comparirà sullo schermo ed esisterà fino a quando esiste tale schermata. Per ora l’array è vuoto, ma andremo presto a riempirlo. Sostituisci il commento //questa è una immagine da caricare con:

immagini.append(elemento)

Creare App iOS con Swift - Progetto 1_1

Il metodo append può essere usato su tutte le variabili di tipo array e serve ad aggiungere un elemento ad un array.

Se ora lanci la tua applicazione, noterai che non fa nulla di più di quanto fatto prima (mostrerà ancora una schermata bianca). Questo perché non abbiamo ancora aggiunto nessun elemento di interfaccia grafica. Ma se vuoi verificare che l’array venga riempito correttamente, aggiungi questo pezzo di codice prima della chiusura del metodo viewDidLoad():

print(immagini)

Creare App iOS con Swift - Progetto 1_1

Questo andrà a dire a Swift di stampare il contenuto dell’array immagini nella console di debug di Xcode. Ora quando andrai ad eseguire l’applicazione, nella finestra in basso di Xcode dovresti leggere quanto segue:

Creare App iOS con Swift - Progetto 1_1

Sei riuscito a stampare il contenuto dell’array sulla console di Xcode? Perfetto! Ora possiamo iniziare a disegnare la nostra interfaccia grafica. Ma penso che per questa prima parte della guida possa andare bene così. Ti ho spiegato molte nozioni e non vorrei sovraccaricarti. Continueremo con questo progetto nella seconda parte della guida. Per ora rifletti su quanto hai fatto in questa prima parte e cerca di mettere in pratica quanto hai imparato. Quando avrai preso coscienza di quanto appreso allora potrai procedere con il corso.

Puoi trovare la cartella di questo primo progetto e di tutti i futuri progetti a questo link. In questo modo puoi confrontarlo con quanto hai fatto tu. Qualora dovessi avere domande o dubbi su questa prima lezione per creare App iOS con Swift, non esitare a contattarmi tramite la sezione commenti di questo articolo. Trovi l’elenco di tutto il corso al seguente link.

Condividi.

Informazioni autore

Ingegnere Informatico laureato presso il Politecnico di Milano. Appassionato di tecnologia e programmazione. Esperto e utilizzatore dei prodotti Apple ma anche di Android e Linux.

Lascia un commento