Familiarizzare con l’interfaccia di Xcode (Free Preview)

Sai qual’è il primo motivo che demotiva qualsiasi sviluppatore alle prime armi?

L’interfaccia del programma da utilizzare. Ti sarà capitato tantissime volte di scaricare un nuovo programma e di non sapere da dove cominciare ad utilizzarlo. Non è ovviamente un problema relativo solo ai tool di sviluppo, lo stesso principio e problema è applicabile anche alle applicazioni che realizzerai e che scarichi di giorno in giorno.

É la normalità, qualsiasi programma ha un grado di complessità più o meno alto che fa perdere di speranza qualsiasi utilizzatore, abile o nuovo che sia.

Ma allora come faccio ad uscire dalla crisi? Come si supera il primo ostacolo?

Come per la programmazione anche l’avvicinamento ad uno strumento complesso, come può essere Xcode, richiede pratica costante e piccoli sacrifici.

Imparare ad utilizzare Xcode e conoscere la sua interfaccia è paragonabile all’utilizzare per la prima volta una macchina, o nel caso fossi ancora un giovincello, una bicicletta.

All’inizio si cerca di prendere stabilità con il mezzo e con i primi comandi di base. Poi si cominciano a fare i primi passi e le prime cadute o ammaccate (speriamo di no). Ed infine si arriva in un punto in cui non è più necessario ripassare mentalmente i comandi da fare perché il corpo è stato talmente abituato da eseguirli in automatico.

Ecco, familiarizzare con l’interfaccia di Xcode ha più o meno la stessa curva di difficoltà. All’inizio, e per un bel po’ di tempo, sembrerà impossibile da utilizzare e ritornerai più volte indietro a ripassare come si chiamava quell’area di utilizzo o comando. Poi la svolta. Ad un certo punto i comandi, aree e parole chiave diventeranno i tuoi migliori amici e non ti occorrerà più ripassarli perché fanno parte di te.

Per tutto però c’è bisogno di pratica e di un istruttore per poter andare veloci nell’apprendimento.

In questa lezione, quindi, ti farò prendere confidenza con l’interfaccia di Xcode ed i suoi strumenti di base. Voglio subito farti notare che ho detto “prendere confidenza”. Questo vuol dire che non ti sparerò diecimila definizioni o ti farò vedere tutti i bottoni a cosa servono e cosa fanno.

Reputo inutile spiegarti tutti quegli strumenti che non puoi utilizzare nell’immediato perché ancora non hai le conoscenze per farlo. Quindi l’approccio di questa lezione e delle successive si limiterà a guidarti nell’utilizzo di uno strumento solo se accompagnato da un atto pratico che puoi capire e comprendere con le conoscenze attuali.

Ad esempio quando arriverà il momento di imparare a creare l’interfaccia dell’applicazione, tra qualche lezione, ti spiegherò il funzionamento della relativa parte dell’interfaccia di Xcode.

Fatta la premessa, sei pronto a ballare?

L’interfaccia di Xcode. La divisione degli spazi e delle aree di lavoro. Impara ad utilizzare Xcode in maniera pratica

Partiamo da dove eri rimasto nella precedente lezione.

La prima e la più importante informazione da sapere è che Xcode è composto da più aree di lavoro. Ogni area di lavoro si comporta in maniera differente in base all’azione che stai svolgendo durante il processo di sviluppo dell’applicazione.

L’interfaccia di Xcode si divide in quattro aree di lavoro o sezioni di lavoro:

interfaccia Xcode. Le aree di lavoro

Ogni area ha delle sotto aree che non ha senso spiegare adesso. Ogni elemento importante verrà utilizzato e spiegato a tempo debito in modo tale che ti rimarrà impresso il funzionamento associato a quell’area.

Per il momento mi limiterò a descriverti superficialmente ogni macro area e a farti vedere il loro utilizzo di base.

Da ora in avanti, per evitare di annoiarti e per fissarti bene le idee, ogni qual volta che faccio qualcosa (di premere bottoni, ecc.) falla anche tu.

La Toolbar: Avviare l’applicazione e ridimensionare il layout di Xcode

Nel lato destro della toolbar sono presenti  sei bottoni divisi in due gruppi da tre.

toolbar bottoni lato destro

I primi tre a sinistra per il momento lasciamoli stare. Hanno un utilizzo speciale e ti sorprenderanno più avanti. I tre di destra invece permettono di ampliare o ridurre l’interfaccia di Xcode aprendo o chiudendo le aree di lavoro.

Le aree che è possibile aprire e chiudere sono la Navigation Area (primo bottone a sinistra), l’Utility Area (l’ultimo bottone a destra) e quello nel mezzo?

L’interfaccia di Xcode, in realtà, è composta da una quinta macro area che al primo avvio dell’applicazione non è presente. Si chiama Debug Area e da dei feedback sugli errori, messaggi e problemi generati dall’applicazione (ma ogni cosa a suo tempo).

Dal lato sinistro della toolbar, Xcode, ti da la possibilità di simulare l’applicazione ed il suo funzionamento all’interno di un ambiente controllato chiamato Simulator.

Il Simulator puoi immaginarlo come un iPhone o iPad incorporato all’interno del tuo Mac. L’iOS Simulator riproduce fedelmente il funzionamento dell’applicazione come se si trovasse all’interno del dispositivo reale. Anzi per dirla tutta, l’iOS Simulator emula a tutti gli effetti il sistema operativo iOS. Anche in questo caso spiegherò nel dettaglio cos’è quando arriverà il momento.

Per il momento limitiamoci ad analizzare l’interfaccia di Xcode.

Il lato sinistro della toolbar è diviso nelle seguenti sezioni:

bottoni lato sinistro toolbar interfaccia xcode

  • Run: la freccia triangolare, permette di avviare il Simulator e quindi anche l’applicazione che stai sviluppando.
  • Stop: il quadrato, stoppa l’esecuzione dell’applicazione all’interno del Simulator.
  • Scheme: se la guardi con attenzione, l’area, è divisa in due parti. Il lato sinistro, dove vedi scritto “LaMiaPrimaApp“, per il momento lascialo così com’è perché serve per i setting avanzati dell’applicazione. Mentre il lato destro, dove c’è scritto “iOS Device“, se lo clicchi ti da modo di scegliere in quale device, il Simulator, testerà l’applicazione.
    Scheme e selezione del dispositivo in cui testare l'appTutti quelli con l’iconcina di Xcode e un’iphone sono le possibili configurazioni del Simulator. Mentre iOS Device ti da la possibilità di testare l’applicazione sul tuo dispositivo reale. Quest’ultimo aspetto lo vedrai in azione tra un paio di lezioni. Selezionando invece uno degli iOS Simulator, verrà aperto una nuova applicazione (iOS Simulator) che simulerà il dispositivo in questione.
  • Activity Viewer: Mostra dei feedback sullo stato d’esecuzione dell’applicazione o, se si verificassero, alcuni avvisi sugli errori avvenuti.

Cos’ì è un po’ noiosa la lezione, vero?

Allora mettiamo un po’ di sale in pentola!

Avviare l’applicazione sull’iOS Simulator

Dallo Scheme seleziona uno dei Simulator che preferisci. L’applicazione funziona per tutti i dispositivi perché, nel setting del progetto avvenuto nella precedente lezione, hai impostato Universal nel campo Device. Quella scelta al momento ha solo questo effetto, più avanti vedrai gli altri.

Poi premi il tasto Run.

A questo punto, se è la prima volta che premi il tasto o avvii Xcode in questa modalità, ti dovrebbe richiedere di attivare la Developer Mode o Modalità di Sviluppo. Questo fa in modo di non farti inserire la password di sistema ogni volta che avvii il Simulator (è consigliata l’attivazione).

Nel frattempo, nella Activity Viewer, dovrebbero comparire delle scritte che indicano il processo d’avvio del Simulator e dell’applicazione.  Dopo un secondo, o un paio, dovrebbe apparire una nuova applicazione: l’iOS Simulator. L’iOS Simulator ha le dimensioni del dispositivo selezionato nello Scheme.

Nell’iOS Simulator dovresti vedere una prima schermata bianca contenente il nome della tua applicazione e subito dopo una pagina bianca.

Quindi una volta premuto il tasto Run, Xcode provvede ad avviare l’applicazione e l’iOS Simulator.

Questo è una delle particolarità dei template. Non c’è stato bisogno di creare dei file, scrivere del codice eppure hai già un’applicazione perfettamente funzionante. Il fatto di vedere una pagina bianca è dovuto al template Single View Application che, come ribadito nella precedente lezione, mette a disposizione un progetto in stile foglio in bianco.

Puoi chiudere il simulatore cliccando nella barra del menu in alto come nel video, Simulator\Quit Simulator, oppure puoi utilizzare il tasto Stop.

Una piccola spiegazione dei file di un’applicazione e la Navigation Area

Visti quali sono i tasti dell’interfaccia di Xcode che avviano l’applicazione, vediamo insieme come navigare all’interno dei file che compongono un progetto e l’applicazione.

A sinistra dell’interfaccia di Xcode c’è la Navigation Area. La Navigation Area, nella parte superiore, è composta da un ulteriore barra di navigazione. 

Il primo pulsante a partire da sinistra si chiama Project Navigator e contiene la lista di tutti i file utilizzati dal progetto e dall’applicazione:

Navigation Area interfaccia Xcode

I file vengono ordinati a cascata. La testa della cascata è definita dal file con l’icona in blu chiamato con il nome dell’applicazione. Il file è di tipo Xcode Project ed è delegato alla gestione di tutte le impostazioni che concernono l’applicazione in sé e le tecnologie utilizzate. Infatti la finestra che vedi associata al seguente file è un contenitore di tante informazioni che verranno utilizzate ed analizzate a tempo debito.

Sotto l’Xcode Project, i file del progetto vengono divisi in Group, che puoi considerare come delle cartelle.

Il primo Group, quello che nell’immagine si chiama “LaMiaPrimaApp”, è composto da tutti i file che compongono l’applicazione. Cliccando su un file, l’Editor Area provvederà a mostrarne il contenuto.

I primi due file, l’AppDelegate.swift ed il ViewController.swift, sono due classi del linguaggio Swift create di default dal template Single View Application. Il loro perché verrà analizzato quando studierai il funzionamento di un’applicazione.

Mentre il Main.storyboard…. aspetta, si chiama storyboard? Esatto! È proprio quello che dicevo nella scorsa lezione, ovvero che Xcode implementa un sistema simile allo storyboard su carta. Grazie a questo file sarai in grado di realizzare le interfacce della tua applicazione.

L’Assets.xcassets invece è il contenitore delle immagini che utilizzerai per realizzare l’interfaccia della tua applicazione. L’altro file storyboard, il LaunchScreen, serve esclusivamente per la realizzazione dell’interfaccia di avvio dell’applicazione. Infine il file Info.plist contiene delle informazioni riguardo il setting di alcune funzionalità dell’applicazione.

Le altre due cartelle, o group, sono parti avanzate del progetto che non tratterai in questo corso. Servono per eseguire stress test o in generale dei test sul funzionamento dell’applicazione.

Gli altri pulsanti della Navigation Area te li spiegherò man mano che ti inoltrerai nel corso dato che sono strettamente legati alle fasi di progettazione e sviluppo.

L’Utility Area, modificare velocemente il look & feel di un’applicazione

Solo per scopo didattico, entra nel file Main.storyboard e dai uno sguardo all’Utility Area.

Utility Area interfaccia Xcode

L’Utility Area è composta da due menu indipendenti.

Il primo in alto, quello che nell’immagine è racchiuso dal riquadro verde, ti permette di cambiare in modo veloce le impostazioni del file selezionato, ad esempio quando realizzeremo l’interfaccia potrai cambiare i colori ecc.  Ogni pannello ti permette di modificare diversi aspetti dell’applicazione o di ricevere informazioni e suggerimenti.

Ad esempio, il primo bottone a sinistra, che si chiama File Inspector, ti da delle informazioni riguardo il file selezionato e visualizzato nell’Editor Area:

File Inspector interfaccia Xcode

Come il nome del file, dove si trova il file nel computer (full path), con quale Xcode viene aperto (Opens in), per quale piattaforma è destinato (Builds for) e altre impostazioni che per il momento non ci interessano.

Solo per gioco, spostati nel quarto bottone. Si chiama Attributes Inspector e permette di modificare alcune caratteristiche dell’oggetto selezionato nello storyboard. 

Ad esempio, se selezioni il quadrato che rappresenta l’interfaccia della tua applicazione, l’Attributes Inspector mostrerà degli attributi che è possibile modificare per cambiare il suo aspetto o alcune caratteristiche. Tra queste ne è presente uno che si chiama Background. Cliccando sulla barretta bianca è possibile cambiare il colore di sfondo dell’applicazione:

Adesso forse inizia a diventare più chiaro il motivo di questi pannelli. Permettono di modificare in maniera veloce l’aspetto e i comportamenti dell’applicazione. Di modifiche ne esistono a migliaia, ma dico sul serio, ed imparerai ad utilizzare le principali durante tutto il corso.

Invece…

Hai visto cosa accade alla top bar dell’Utility Area quando ti sposti in un file Swift? Ad esempio, prova a spostarti nel file ViewController.swift e guarda attentamente l’Utility Area.

Come puoi notare la parte alta dell’Utility Area perde quattro bottoni:

i bottoni dell'utility area in un file swift

Quindi questo vuol dire che quei quattro bottoni sono esclusivamente adoperati per la creazione delle interfacce e nella gestione dello storyboard.

Mentre in un file .swift i pannelli presenti sono solo il File Inspector ed il Quick Help (il bottone a forma di punto interrogativo, nell’immagine è già selezionato).

Il Quick Help da informazioni veloci riguardo gli oggetti e gli strumenti utilizzati. Ad esempio, con il mouse clicca la definizione della classe ViewController e nello specifico l’ereditarietà della UIViewController.

Anche se non sai perché è stato messo e perché esiste questo file, il Quick Help ti da delle informazioni riguardo la classe UIViewController:

Quick Help interfaccia Xcode

Quindi anche non conoscendo cosa facciano queste classi e perché sono state inserite, il Quick Help ti da comunque delle informazioni che più in là diventeranno utilissime per rinfrescarsi la memoria riguardo i codici scritti. Nella prossima lezione ti toglierò ogni dubbio sul perché di questi file e classi.

Per ora concentriamoci sull’interfaccia di Xcode!

utility area interfaccia xcode. inserimento nuovi oggetti

La parte arancione dell’Utility Area, quella in basso nella prima immagine del paragrafo, da la possibilità di poter inserire velocemente oggetti grafici, blocchi di codice e nuovi file al progetto.

  • File Template Library: il primo bottone a sinistra permette di inserire nuovi file al progetto.
  • Code Snippet Library: il secondo bottone, permette di inserire dei blocchi di codice. Possono essere classi, strutture, if-else oppure pezzi di codice avanzati per la gestione di particolari funzionalità. Lascia il tempo che trova dato che quasi tutti i codici inseriti nella libreria sono in C, C++ e Objective C.
  • Object Library: il più interessante. Permette di aggiungere oggetti grafici all’interno dell’interfaccia. É facilmente deducibile che può essere utilizzato solo sullo storyboard dato che è lì che viene creata la grafica di un’applicazione. Tra tutti, questo è il pannello che utilizzerai di più.
  • Media Library: non è presente niente all’interno perché serve a mostrare tutti i video inseriti nel progetto. Dato che non ce n’è, il pannello è vuoto.

Solo per non far rimanere campata in aria questa spiegazione, spostati nel Main.storyboard.

L’area di lavoro è tracciata dai contorni rettangolari presenti nell’Editor Area. Proviamo ad inserire un nuovo oggetto grafico all’interno. Dall’Object Library, cerca l’oggetto Button, selezionalo e trascinalo all’interno del riquadro all’interno dello storyboard che rappresenta l’interfaccia dell’applicazione.

Puoi già iniziare a capire come Xcode sia uno strumento di sviluppo potentissimo. Non hai avuto bisogno di scrivere una riga di codice che zac ecco che un bottone è comparso nell’interfaccia della tua applicazione.

Quando parleremo di interfacce nel dettaglio, ti spiegherò da dove escono fuori tutti questi oggetti e come creare un’interfaccia. Per ora hai visto che grazie all’Object Library puoi prendere un oggetto bello e pronto e posizionarlo nella tua applicazione.

Infatti se avvii l’applicazione dal tasto Run, vedrai comparire magicamente i tre bottoni:

test-xcode-simulator

Esercizio 0 (da svolgere). Anche se non conosci la sua utilità, dall’Object Library, prova a spostare l’oggetto Label all’interno dell’interfaccia dell’applicazione, posizionalo sopra i bottoni.

Anche i bottoni, come lo sfondo dell’interfaccia, sono modificabili. La modifica è sempre delegata al pannello Attributes Inspector anche se poi vedrai che è possibile farlo anche dal codice.

Tra l’altro, ad esempio, puoi modificare alcuni oggetti grafici semplicemente con un doppio click su di essi. Al bottone, facendo doppio click, puoi modificare il testo che mostra. Fai doppio click su un bottone e cambia il testo a tuo piacimento. Una volta cambiato vedrai che, nell’Attributes Inspector, l’attributo title è stato automaticamente modificato con il testo che hai inserito da Editor Area:

modifica del testo di un bottone da interfaccia Xcode

Quindi più in generale, ogni oggetto grafico ha una carrellata di attributi che ne descrivono l’aspetto e il comportamento. Grazie all’Attributes Inspector puoi modificarli in maniera veloce ed intuitiva.

Esercizio 1 (da svolgere). Utilizzando l’Attributes Inspector, prova a modificare il colore del testo del bottone. L’attributo da modificare si chiama Text Color.

Considerazioni

Stoooop! Mi fermo qua, c’è già troppa carne sul fuoco e aggiungerne altra, oltre ad essere inutile, potrebbe solo confonderti le idee. Il focus di questa lezione era familiarizzare con l’interfaccia di Xcode, quindi non puoi pretendere di innamorare se prima non hai stretto amicizia.

Durante tutto il corso vedrai gli altri strumenti e prenderai sempre più confidenza con quelli precedenti.

Da ora in avanti, utilizzerò i termini e le definizioni dei pulsanti e aree dell’interfaccia di Xcode. Qualora non ti ricordassi un termine, ti invito a ritornare in questa lezione.

I termini sono in inglese e non ho voluto italianizzarli perché in tutti i tutorial, che siano in italiano, spagnoli, ecc. utilizzano tutti la terminologia inglese. Ergo, imparali a riconoscere in inglese.

Ad esempio se ti dico: apri il Quick Help. Dove devi andare a guardare? Devi andare nell’Utility Area e nel pannello in alto, il secondo bottone è quello relativo al Quick Help.

Non ti preoccupare se non ti ricordi dove stanno i bottoni, la lezione l’ho scritta apposta e comunque, certe volte dimentico anche io come si chiamano i bottoni :P

In ogni modo, nella prossima lezione analizzerai come funziona un’applicazione, cosa sono tutti quei file e qual’è il flusso d’esecuzione del progetto.

Buona Programmazione!

Changelog

  • 17/10/2016 – Aggiunto il changelog. Modifiche al testo e compatibilità con Xcode 8.

Torna a: Corso creare applicazioni per iOS con il linguaggio Swift > Le Basi dello Sviluppo Applicazioni
  • Alain Desitter

    Ciao Beppe,
    ho un problema con l’implementare un’immagine come caricamento iniziale della mia app.

    Ho pensato di utilizzare il LaunchScreen.storyboard.

    Se eseguo la mia app mi carica una pagina bianca prima di vedere la mia prima pagina che è la login, ma in quella pagina bianca ho provato a mettere una label una image view un bottone ma nulla non riesco a vedere nulla è sempre solo bianca.

    Altra domanda, è possibile aumentare i secondi di permanenza della pagina legata al LaunchScreen.storyboard, dura giusto un secondo, pensavo di aumentare quel lasso di tempo a 2 o 3 secondi.

    • Ciao Alain,
      Vai nel pannello General dove ci sono le impostazioni del progetto (ci vai dal primo file nel File Inspector) e controlla che il Launch Screen File sia effettivamente il LaunchScreen.storyboard.

      In caso fai la prova semplicemente cambiando il colore di background della view del Launch Screen.

      Fammi sapere,
      Giuseppe Sapienza

      • Alain Desitter

        Ho provato ma nulla sempre bianca.
        Ho anche creato un nuovo progetto da 0, messo lo sfondo rosso nel WC del LaunchScreen.storyboard.

        messo lo sfondo verde nal WC del main.storyboard.

        controllato nel pannello generale le impostazioni e punta al LaunchScreen, nel dubbio ho provato a riselezionarlo e nella tendina mi da LaunchScreen.storyboard ma il .storyboard viene troncato dopo la selezione.

        Eseguo la mia app di prova ed appare una pagina bianca per 1 o 2 secondi poi quella con lo sfondo verde, dello sfondo rosso nessuna traccia.

        Mi sono anche messo a guardare dei video su you tube, rifaccio tutti gli stessi passaggi dei video, nella loro esecuzione funziona, nella mia no.

  • Alain Desitter

    ok, dove lo invio?

Start typing and press Enter to search

gestione-errori-in-swiftcome funziona una applicazione iOS con linguaggio swift