Xcode per principianti : interfaccia (aggiornamento 2019)

Condividi questo articolo:


Questa guida demistificherà Xcode per te e ti insegnerà cosa devi sapere per iniziare a creare app!

Questo tutorial di Xcode è aggiornato per Xcode 10. Se stai usando una versione precedente, ti consiglio di aggiornare all’ultima versione perché ci sono cambiamenti significativi nel linguaggio di programmazione Swift che otterrai solo con l’ultima versione di Xcode .

Mentre questa guida copre solo come utilizzare Xcode, puoi avere una visione d’insieme di come creare app iOS leggendo la mia guida Come fare un’app senza esperienza di programmazione.

Ecco cosa imparerai:

  • Dove scaricare Xcode 10
  • Le 5 parti principali dell’ambiente di sviluppo Xcode
  • Come utilizzare il simulatore iOS per testare la tua app
  • Alla fine di questa esercitazione su Xcode, avrai una conoscenza di base su come navigare nell’ambiente di sviluppo e su come creare il tuo primo progetto Xcode.

1. Dove posso scaricare Xcode?

Il modo più semplice per ottenere Xcode è tramite il Mac App Store. Fare clic sul collegamento per accedere all’elenco.

Puoi anche scaricarlo manualmente se non hai il Mac App Store. Basta visitare la pagina degli sviluppatori Apple per Xcode.

2. Demistificazione dell’interfaccia Xcode

Xcode 10 User Interface

Puoi anche controllare qui la documentazione Apple completa per XCode.

Diamo ora un’occhiata al diagramma qui sotto. Se la tua interfaccia sembra diversa, assicurati di avere Xcode 10 e non una versione precedente.

Interfaccia utente di Xcode 10

Il motivo per cui questo è un ottimo diagramma è perché mi consente di fare riferimento a queste diverse sezioni dell’interfaccia e puoi fare riferimento a questo diagramma per vedere di cosa sto parlando!

Come puoi vedere dal diagramma, ci sono 4 aree principali: Navigator, Editor, Debug Area e Utility Area.

Tieni presente che puoi regolare le dimensioni di ciascuno di questi riquadri passando il cursore sopra i confini di ciascuna area e trascinando.

Puoi anche mostrare e nascondere le varie aree secondo necessità tramite i pulsanti “Visualizza” nell’angolo in alto a destra:

Visualizza Xcode Attiva / disattiva

Questo può essere utile, ad esempio, quando stai scrivendo codice e non hai bisogno dell’area debugger o dell’area utility. Quindi puoi usare i pulsanti Visualizza per nascondere quei 2 riquadri per dare più spazio visibile al tuo editor.

Bene, andiamo ora nell’area del Navigatore!

3. L’area del navigatore

In questo riquadro sono presenti diversi navigatori tra cui è possibile alternare utilizzando la barra di selezione del Navigatore (fare riferimento al diagramma). I tre navigatori che utilizzerai molto sono i navigatori Progetto, Ricerca e Problema.

Project Navigator
Qui puoi vedere tutti i file associati al tuo progetto.

Xcode project settings

Xcode 10 Project Navigator

All’interno del navigatore del progetto, puoi anche creare “Gruppi” in cui organizzare i tuoi file. Il risultato è che quando crei un gruppo nel navigatore del progetto (facendo clic con il tasto destro e scegli Crea gruppo), in realtà non crea una cartella in il file system; esisterà solo nel tuo progetto Xcode, quindi durante la creazione di Gruppi qui organizzerai il tuo file in Xcode, non organizzerà i file effettivi presenti sul tuo disco rigido. Ecco perché preferisco creare le directory effettive sul mio disco rigido, organizzare i file e quindi trascinarli nuovamente nel progetto Xcode.

È inoltre possibile fare clic con il pulsante destro del mouse sul navigatore del progetto e creare nuovi file o aggiungere file esistenti al progetto. Oppure puoi trascinare cartelle o file dal tuo computer direttamente nel navigatore del progetto e si aprirà una finestra di dialogo che chiede come si desidera aggiungere i file.

Se fai clic su un file nel navigatore del progetto, verrà visualizzato il contenuto del file nell’area Editor. Se invece fai doppio clic su un file, si aprirà una nuova finestra che può essere utile quando hai due monitor.

Il nodo principale del navigatore del progetto è il tuo file di progetto Xcode (indicato dall’icona blu). Facendo clic su questo, le proprietà del progetto si apriranno nell’area dell’editor.

Impostazioni del progetto Xcode

Altre impostazioni del progetto

Cerca Navigator

Con la scheda del navigatore di ricerca, puoi facilmente cercare parti di testo nel tuo progetto.

Xcode Search Navigator

Ti ritroverai a utilizzarlo molto quando stai cercando una proprietà, un metodo o una variabile specifici e non riesci a ricordare esattamente dove si trova.

Issue Navigator

Il navigatore dei problemi ti mostra tutti i problemi con la tua app.

Xcode Issue Navigator

Quando compili e compili la tua applicazione per testarla, se ci sono alcuni problemi in cui Xcode non è in grado di creare la tua app, si fermerà e ti mostrerà gli errori di colore rosso nel navigatore dei problemi. Puoi fare clic su un errore e ti mostrerà nell’area dell’editor in quale file e linea non funziona.

Mostrerà anche avvisi gialli nel navigatore del problema. Sebbene la risoluzione degli avvisi non sia necessaria per la creazione della tua app, sono avvertimenti che potrebbero esserci potenziali problemi.

4. L’area dell’editor

L’area dell’editor è dove probabilmente passeremo la maggior parte del nostro tempo! Questo è dove avviene tutta la codifica.

Area dell’editor Xcode

Come menzionato in t

proietta la sezione navigatore, quando fai clic su un file lì, si apriranno i contenuti in questa area dell’editor per consentirne la modifica. Tuttavia, questo non è l’unico modo per navigare verso diversi file di codice.

Xcode Editor Area Back and Forward Arrows

Ci sono queste piccole frecce avanti e indietro nell’angolo in alto a sinistra dell’area dell’editor. Sfortunatamente queste frecce non sono etichettate nel fidato diagramma dell’interfaccia Xcode all’inizio di questo articolo, quindi le chiamerò “frecce Xcode avanti e indietro” e ti mostrerò un’immagine qui:

Area Editor Xcode Frecce avanti e indietro

Questi ragazzi sono in realtà piuttosto utili. Agiscono come i pulsanti avanti e indietro sul browser e ti consentono di navigare verso i file visualizzati in precedenza.

Un altro modo per accedere rapidamente al file necessario è utilizzare la barra di scorrimento (vedere il diagramma). La barra di scorrimento consente di scorrere rapidamente i gruppi e trovare il file necessario. Sembra un pangrattato nella parte superiore dell’area dell’editor ma quando fai clic su un segmento di esso, si aprirà un menu con altri gruppi in quel livello gerarchico:

Barra di salto dell’area dell’editor Xcode

Se fai clic sul segmento di coda della barra di scorrimento (che è il file corrente che stai guardando), si aprirà un menu che mostra tutti i metodi nel file che non è utile solo per saltare in un’altra area all’interno del file , ma ti mostrerà a colpo d’occhio quali metodi sono disponibili in questo file.

Menu del metodo della barra di scorrimento dell’area dell’editor Xcode

Questo lo fa per la navigazione nell’area dell’editor, tuttavia ha ancora qualche asso nella manica.

Tre tipi di visualizzazioni dell’editor

L’area dell’editor ha tre diverse visualizzazioni e puoi passare da una all’altra con il set di pulsanti nell’angolo in alto a destra:

Pulsanti di visualizzazione dell’area dell’editor Xcode

Il pulsante più a sinistra è per la visualizzazione del riquadro dell’editor singolo, che è utile per lo schermo del piccolo laptop se non ho un monitor esterno.

Il pulsante centrale è la vista Assistant Editor che ti mostrerà il file di accompagnamento al file che stai guardando. Sembra una vista a due riquadri. Ad esempio, se stai guardando un file ViewController.swift, il riquadro di destra ti mostrerà il file di classe collegato per quel ViewController. Ogni riquadro ha anche barre di salto indipendenti, quindi puoi anche usarlo per cambiare il file che viene visualizzato in ciascun riquadro.

Xcode 10 Assistent Editor View

Il pulsante più a destra è la vista Editor versione in cui è possibile confrontare due file. Personalmente, non mi sono trovato ad usare questo punto di vista, quindi non posso parlarne troppo. Ecco la sezione nella documentazione di Apple.

Vista Interface Builder

Finora abbiamo parlato della modifica dei file di codice e della scrittura del codice, tuttavia Xcode ha integrato il builder di interfacce e quando stai visualizzando lo Storyboard o un file XIB, l’area dell’editor si trasformerà in un visual designer.

Xcode 10 Editor Area XIB Interface Builder

In realtà useremo questa vista di visual designer nella prossima parte della serie, quindi ne parleremo dei vari elementi.

Ricerca e sostituzione all’interno del file

Premi Comando-F per visualizzare un popup di ricerca nell’angolo in alto a destra che cercherà qualsiasi cosa digiti all’interno del file corrente. Questo è anche un ottimo modo per saltare a varie aree del tuo file. Puoi anche utilizzare questo popup per eseguire sostituzioni all’interno del tuo file.

Saltare alle definizioni

Se stai cercando un codice e vedi un nome di classe di cui vuoi passare alla definizione, puoi tenere premuto Comando e fare clic sul nome della classe per passare rapidamente a quel file.

Il margine di interruzione

Il margine di interruzione (vedere il diagramma in alto) è il punto in cui è possibile fare clic per impostare i punti di interruzione in determinate righe di codice. Quando imposti un punto di interruzione, vedrai apparire un indicatore blu. Per disattivare un punto di interruzione, fai di nuovo clic sull’indicatore blu e si spegnerà.

Xcode 10 Editor Area Breakpoint

Xcode 10 Editor Area Breakpoint

Se si desidera rimuovere completamente il punto di interruzione, è possibile fare clic e trascinare l’indicatore blu fuori dalla grondaia del punto di interruzione.

Per visualizzare un elenco di tutti i punti di interruzione impostati nel progetto, è presente una scheda “Navigatore punti di interruzione” nell’area Navigatore.

C’è anche un interruttore globale per attivare o disattivare i punti di interruzione nella parte superiore dell’area dell’editor che vedremo quando esamineremo la barra degli strumenti.

Non preoccuparti se non riesci a ricordare tutto in questo momento. Lavoreremo con tutte queste aree e quando inizierai a scrivere codice, tutto ciò diventerà per te una seconda natura dopo una settimana.

5. L’area di utilità

L’area dell’utilità Xcode viene utilizzata principalmente per il riquadro Impostazioni.

Area Utilità Xcode

Il riquadro Ispettore ti fornirà i dettagli sul file che hai evidenziato nel navigatore del progetto. Tuttavia, quando guardi un file XIB / StoryBoard, il riquadro di ispezione ti mostrerà i diversi attributi che puoi modificare per un elemento selezionato.

Xcode Utility Area

Il riquadro della libreria

Per gli sviluppatori che hanno avviato iOS con Xcode 9 e versioni precedenti, il riquadro della libreria si trovava a destra sotto il riquadro dell’ispettore. In Xcode 10, Apple ha spostato il riquadro della libreria in un pulsante che è possibile attivare ogni volta che è necessario aggiungere l’elemento dell’interfaccia utente

stai cercando:

Il riquadro della libreria non sarà molto utile fino a quando non guarderai un file XIB / StoryBoard. Quando stai usando la parte Interface Builder di Xcode, puoi trascinare gli elementi dell’interfaccia utente dal riquadro della libreria nell’area dell’editor per aggiungere quell’elemento all’interfaccia utente.

Se sto modificando i file di codice, di solito nascondo l’intera Area Utilità per dare più spazio al mio editor perché non ho bisogno del riquadro di ispezione o del riquadro della libreria.

6. L’area di debug

L’area di debug mostrerà l’output della console e lo stato di varie variabili quando si esegue l’applicazione.

Xcode Debug Area

Lo userai molto mentre esegui il debug del tuo codice e proverai a capire perché le cose non stanno andando come previsto! Dovrò scrivere un tutorial separato per il debugger Xcode perché c’è troppo da menzionare qui.

7. La barra degli strumenti

Abbiamo già parlato di alcuni dei pulsanti di questa barra degli strumenti. Partiamo da sinistra.

Xcode Toolbar

Il pulsante più a sinistra è il pulsante Esegui. Questo costruirà ed eseguirà la tua applicazione e avvierà la tua app nel simulatore iOS. Il pulsante accanto interromperà l’esecuzione dell’applicazione e tornerà a Xcode.

Xcode Run Options

Se fai clic e tieni premuto il pulsante Esegui, otterrai più opzioni per eseguire la tua app:

Opzioni di esecuzione Xcode

Test per eseguire i test unitari se li hai nel tuo progetto.

Profilo per misurare vari aspetti dell’applicazione come prestazioni, utilizzo della memoria e altro.

Analizza per consentire a Xcode di analizzare il tuo codice e verificare la presenza di potenziali perdite o cattive pratiche.

href = “https://developer.apple.com/library/archive/documentation/DeveloperTools/Conceptual/debugging_with_xcode/chapters/debugging_tools.html#//apple_ref/doc/uid/TP40015022-CH8-SW16 ″ rel” ” target = “_ blank”> Documentazione Apple iOS.

Il menu a discesa accanto al pulsante Stop indica quale target di build vuoi eseguire (puoi anche eseguire un target di Apple Watch) e puoi anche scegliere se vuoi eseguirlo sotto i simulatori di iPhone o iPad (o versione diversa se li hai installati ). La selezione “Dispositivo iOS” è di eseguire la tua app sul tuo dispositivo se è stata collegata e correttamente fornita (che ha bisogno di un intero tutorial in sé!).

E infine nell’estrema destra della barra degli strumenti, abbiamo i pulsanti di visualizzazione dell’editor, i pulsanti per attivare o disattivare vari pannelli Xcode e il pulsante Organizer.

8. Xcode Organizer

L’Organizer si trova nella voce di menu Finestra -> Organizer e visualizza una finestra separata chiamata Organizer. Esistono diversi scopi dell’organizzatore e li metteremo in evidenza di seguito.

dispositivi
Ci sono molte cose che puoi fare nella finestra dei dispositivi (scorciatoia da tastiera ⌘ ⇧ 2) che non posso elencare tutte. Tuttavia, gli usi principali sono la gestione dei profili di provisioning sul proprio sistema E su vari dispositivi. Non abbiamo ancora parlato dei profili di provisioning, ma sono importanti per distribuire la tua app su dispositivi iOS fisici reali. Abbiamo un tutorial separato per questo!

Controlla la documentazione Apple per ulteriori funzionalità della scheda Dispositivi.

Arresti

Puoi consultare il registro degli arresti anomali dai dispositivi, abilitare l’uso dello sviluppo per vari dispositivi connessi e altro ancora.

repository

In Xcode 10, puoi trovare i diversi repository nel menu Controllo sorgente >> Check out, nella scheda Repository, sarai in grado di gestire i repository locali e remoti (GitHub, ecc.) Che hai impostato per i tuoi progetti.

progetti

Nella scheda progetti, puoi vedere un elenco di progetti che hai già aperto in modo da poterli riaprire rapidamente e sarai in grado di gestire anche i dati derivati ​​e le istantanee dei tuoi progetti.

archivio

Nella scheda archivi, puoi gestire i tuoi archivi per vari progetti. Archivia la tua app quando desideri distribuirla nello store o distribuirla in qualche altro modo.

Documentazione

In Xcode 10, la documentazione e l’API sono disponibili tramite il menu Guida
Puoi visualizzare la documentazione dell’SDK per iOS qui.

9. Il simulatore iOS

Xcode 10 viene fornito in bundle con un meraviglioso simulatore iOS su cui testare la tua applicazione. In effetti, puoi utilizzare il simulatore iOS per la maggior parte del tuo sviluppo e quindi trovare un dispositivo su cui testare quando hai quasi finito. (Da Xcode 6.3, anche Apple Watch Simulator è stato aggiunto per funzionare con le app Watch.)

Xcode iOS Simulator

The Xcode iOS Simulator

Puoi effettivamente fare molto con il simulatore, tra cui:
-Rotazione del dispositivo
-Simulazione di varie coordinate GPS
-Device shake
-Simulazione di scenari di memoria insufficiente


Per ulteriori informazioni visita il sito: immagi.net

Condividi questo articolo: