Nella lezione precedente ti ho mostrato come creare un nuovo progetto per un'app iOS utilizzando SwiftUI.

Dopo aver scelto il template, i primi settings come il Target Name e il Bundle Identifier, Xcode ci ha portato all'interno del progetto.

Oggi riprenderemo da lì e cominceremo a scendere nei dettagli dell'interfaccia di Xcode e dei primi strumenti che ci mette a disposizione come il Canvas ed il Simulator.

Infine, per non farci mancare proprio nulla, daremo un primo sguardo al codice del tuo primo progetto iOS con SwiftUI.

Sei pronto a sporcarti le mani?
Let's start! 🚀

La struttura di Xcode

La curva d'apprendimento di Xcode è relativamente ripida se affrontata tutta in un'unica battuta. Infatti ci sono talmente tanti pannelli, opzioni e strumenti che spesso e volentieri è impossible conoscerli tutti (e io sono fra questi).

Per evitare di annoiarti, come ho accennato nella presentazione del corso, utilizzeremo un approccio top-down e ci focalizzeremo solo sull'essenziale.

La prima nozione fondamentale di Xcode è che ha una struttura a matriosca con 5 sezioni principali. Oggi vedremo le prime tre: Navigator, Editor e Toolbar.

💡 Le 5 macro aree di Xcode sono: Navigator, Editor, Toolbar, Inspector ed Debug Area/Console.

Per aprirle tutte dovrai cliccare su i tre bottoni che trovi nei rispettivi angoli di Xcode:

Oppure, se dovessi aver difficoltà ad individure questi bottoni, puoi utilizzare la top bar di Xcode e selezionare:

• View/Navigators/Show Navigator (o Hide) 

• View/Debug Area/Activate Console (o Deactivate) 

• View/Inspector/Show Inspector (o Hide)

• View/Hide Toolbar (o Show)

In alternativa puoi anche utilizzare i comandi da tastiera. Infine, se apri tutto, questo è quello che dovresti ottenere (l'immagine è di Xcode 14 ma Xcode 15 dovrebbe essere identico):

✅ Salva questa immagine e la lista dei comandi rapidi da tastiera dato che da qui in avanti ti chiederò di aprire questi pannelli.

Perfetto! fatta questa breve intro alle sezioni di Xcode, cominciamo a vedere quelle ci interessano.

Xcode: File Navigator

Come ti ho accennato nella lezione precedente un template crea un progetto con dei file di partenza. Questi file li possiamo ispezionare dal File Navigator che è il primo sotto pannello, con icona a forma di cartella, all'interno del Navigator.

Di default trovi 5 files e 2 cartella. Selezionando ogni singolo file vedrai che l'Editor cambierà di contenuto.

• Project file o xcodeproj: Il primo file in alto con icona blu che ha il nome del tuo Product Name. Mostra le impostazioni del progetto e dell'applicazione. 

• ProductNameApp.swift: Il file con l'icona del linguaggio Swift, come puoi immaginare è un file di testo scritto in Swift ed impareremo a capire più avanti cosa fa.

  • In genere questo file, che nel mio caso si chiama LearnWithPeppeApp, viene generato mettendo insieme ProductName+App.

•  ContentView.swift: Questo è il file in Swift e SwiftUI che identifica l'interfaccia della tua app. Tra poco vedremo in che modo.

• Assets: È una cartella speciale in cui inserirai le varie immagini ed icone del tuo progetto.  

• Preview Content/Assets: Simile all'Assets file ma ci permetterà di inserire immagini/icone che utilizzeremo solamente in fase di sviluppo e non andranno a finire nell'applicazione che rilascerai su App Store.

Questi file li trovi all'interno della cartella in cui hai salvato il progetto e puoi accedervi cliccando sul Project File con il tasto destro e selezionando Show in Finder:

Xcode: Canvas

Adesso che sai come navigare all'interno dei file del progetto possiamo cominciare ad assaggiare un po' di programmazione con SwiftUI.

Seleziona il file ContentView, il tuo Editor dovrebbe essere diviso in due colonne. Da un lato il codice e dall'altro lato un dispositivo.

La colonna di destra si chiama Canvas e permette di visualizzare in maniera quasi instantanea il codice che hai prodotto sulla sinistra:

Nel caso in cui non dovessi vedere il Canvas lo puoi aprire selezionando la seconda icona sulla destra della parte superiore dell'Editor e cliccando su Canvas:

Come funziona il Canvas in Xcode?

Sulla sinistra hai del codice e, se fai attenzione alle parole, puoi notare che ci sono due blocchi ben distinti che hanno in se View e Preview:

Cosa stanno ad indicare?

Il blocco View, che comincia con la parola struct seguito dal nome del file e dai : View, rappresenta un pezzo di interfaccia della tua app:

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

Se poi ci spostiamo un po' più all'interno di questa struct ContentView troviamo un Text che contiene la stessa frase che viene mostrata all'interno del canvas ed una Image che mostra un'icona di sistema:

Dall'altro lato, la Preview è il pezzo di codice che permette ad Xcode di capire che deve renderizzare l'interfaccia che hai prodotto all'interno della View.

Quindi la Preview non fa altro che prendere il contenuto della ContentView e darlo in pasto al Canvas:

#Preview {
    ContentView() // <- La View che trovi nella parte superiore del file 
}

Un modo per rendersi conto di come la Preview interagisce con Xcode è quello di cancellare questo blocco. Infatti se cancelli la Preview, il Canvas dovrebbe scomparire da Xcode:

Modificare la ContentView

Anche se vedremo più nel dettaglio come modificare la ContentView nelle prossime lezioni, voglio comunque darti un assaggio di come queste modifiche vengono riportate nel Canvas.

All'interno del Text ci sono delle virgolette e queste rappresentano il testo che verrà mostrato all'interno dell'applicazioni. Se modifichi quel testo in qualcos'altro vedrei che il Canvas si aggiornerà automaticamente:

⚠️ Nel caso in cui nel Canvas dovesse comparire un "Automatic preview updating paused", niente panico! Ti basta cliccare sul tasto Resume ed il Canvas riprenderà a funzionare.

import SwiftUI

Prima di passare all'ultima parte di questa lezione, cioè il Simulator, voglio spendere due parole su quella piccola linea che trovi all'inizio del file ContentView:

import SwiftUI

Cosa significa questo import?

Ti ho accennato all'inizio del corso che SwiftUI è la tecnologia che utilizzerai, da qui in avanti, per creare applicazioni per i dispositivi Apple. 

💡 SwiftUI è un framework, ovvero in maniera semplicistica, un insieme di file e funzionalità belle e pronte che ti aiuteranno a sviluppare app.

Grazie a quell'import, infatti, Xcode capisce che vuoi utilizzare SwiftUI all'interno di quel file. Parole come View, Provider, Image e Text fanno parte di SwiftUI.

Se cancelli quell'import SwiftUI dal file noterai che compariranno degli errori che non ti permetteranno di avviare il Canvas e l'app:

Xcode infatti ci segnala che non riesce a trovare la parola View e Provider perché per l'appunto fanno parte del framework SwiftUI.

Avviare il Simulator

Ci siamo quasi per oggi! L'ultimo pezzo che ci rimane da vedere prima di concludere la lezione è il Simulator.

Il Simulator emula a tutti gli effetti un dispositivo reale all'interno del tuo mac. Ti permetterà di installare la tua app e testerla senza dover possedere un iPhone, iPad o Apple Watch.

Aspetta! Allora qual è la differenza con il Canvas?

A differenza del Canvas in cui puoi testare una sola View e Provider per volta (non proprio così ma per il momento diciamo di si), il Simulator ti permetterà di testare l'app per intero e sopratutto testarla all'interno del sistema operativo, cosa che per esempio il Canvas non può fare.

Come si avvia il simulatore?

Nella Toolbar di Xcode, seleziona prima un dispositivo dalla lista che trovi più o meno a metà ed infine clicca sul bottone triangolare sulla sinistra.

Se tutto va per il verso giusto, si dovrebbe aprire una nuova app e successivamente dovresti vedere comparire la tua app Hello, World!.

Dal Simulator potrai entrare dentro iOS cliccando sull'icona a forma di casa 🏠 o usando CMD+H. Una volta fatto troverai la tua app con lo stesso nome del Product Name.

Infine, per stoppare il Simulator puoi cliccare sul tasto quadrato all'interno della Toolbar di Xcode.

Conclusione

Ci siamo! Adesso dovresti avere i primi strumenti per cominciare ad entrare nei dettagli di SwiftUI e dello sviluppo app.

Da qui in avanti nominerò pannelli e strumenti come il Navigator, Editor, Canvas, Simulator e gli altri che ci mette a disposizione Xcode, senza farti vedere come accedervi in modo tale da andare più spediti.

Quindi spendi un paio di minuti a familiarizzare con l'interfaccia di Xcode prima di procedere alla prossima lezione!

Per esempio, se dovessi chiederti di aprire l'Inspector, a quale pannello sto facendo riferimento? quello di destra o sinistra? 🤔

Ad ogni modo, trovi tutto qui in questa lezione o puoi sempre chiedere tramite commenti o dentro la nostra community se dovessi rimanere bloccato in qualche passaggio!

Buona programmazione! 👨‍💻👩‍💻