Tutorial sobre la creació d'aplicacions per a iOS amb Swift
Crear aplicacions per a iOS mai ha estat tan fàcil gràcies a l'ecosistema de desenvolupament complet d'Apple a través de Xcode i el llenguatge de programació Swift. En aquest article, aprendràs el flux bàsic de la creació d'una aplicació per a iOS amb Swift, des de la configuració de les eines, la creació d'un projecte nou, el disseny de la interfície i l'execució de l'aplicació al simulador. Tot i que aquest tutorial és introductori, els passos haurien de ser suficients per ajudar-te a crear una aplicació senzilla i funcional.
-
1. Preparació d'eines i requisits
Abans de començar a escriure codi, assegureu-vos que teniu els dispositius i el programari següents:
1. MacBook/iMac (o macOS en dispositius Apple), ja que oficialment Xcode només s'executa en macOS.
2. Xcode (descàrrega gratuïta des de la Mac App Store). Xcode inclou un editor de codi, un simulador d'iPhone i eines de compilació i depuració.
3. Swift (inclòs a Xcode).
4. (Opcional) Compte de desenvolupador d'Apple per a la instal·lació en dispositius físics i la publicació a l'App Store.
Un cop instal·lat Xcode, obriu l'aplicació i espereu que es completi el procés d'instal·lació de components addicionals si cal.
-
2. Crea un projecte nou a Xcode
1. Obriu Xcode.
2. Seleccioneu Crea un nou projecte Xcode.
3. A la secció de plantilles, seleccioneu:
– iOS
– Aplicació
4. Feu clic a Següent i, a continuació, empleneu la configuració del projecte:
– Nom del producte: per exemple `HelloSwiftApp`
– Equip: seleccioneu el vostre compte (podeu estar en blanc si no heu iniciat la sessió)
– Identificador d'organització: per exemple `com.devname`
– Interfície: tria SwiftUI (més moderna i senzilla per a principiants)
Nota: Si voleu UIKit, podeu triar Storyboard, però aquest tutorial se centra en SwiftUI.
– Llenguatge: Swift
5. Feu clic a Següent i seleccioneu la ubicació d'emmagatzematge del projecte i, a continuació, feu clic a Crea.
Un cop creat el projecte, veureu una estructura de fitxers com ara `HelloSwiftAppApp.swift` i `ContentView.swift`.
-
3. Comprensió de l'estructura bàsica d'un projecte SwiftUI
A SwiftUI, el punt d'inici d'una aplicació sol ser el fitxer `ElNomDelTeuAplicacióApp.swift`. Per exemple:
"`ràpid
importar SwiftUI
@principal
struct HolaSwiftAppApp: Aplicació {
cos de la variable: alguna escena {
Grup de finestres {
Vista de contingut()
}
}
}
“
Breu explicació:
– `@main` marca el punt d'entrada de l'aplicació.
– `WindowGroup` és el contenidor de vista principal.
– `ContentView()` és la primera vista que es mostra.
Mentrestant, `ContentView.swift` conté la vista principal:
"`ràpid
importar SwiftUI
struct ContentView: Visualització {
var body: some View {
Text ("Hola, món!")
.padding()
}
}
“
-
4. Creació d'una interfície d'usuari senzilla: aplicació "Notes ràpides"
Per fer les coses més interessants, crearem una aplicació senzilla anomenada "Notes ràpides" que permet als usuaris escriure notes i mostrar-les com una llista.
Pas 1: Creació d'estats per a l'entrada i la llista
Canvia `ContentView.swift` a:
"`ràpid
importar SwiftUI
struct ContentView: Visualització {
@State var privada notaText: String = “”
@State notes de variable privada: [String] = []
var body: some View {
Vista de navegació {
VStack(espaiat: 16) {
TextField("Escriu una nota...", text: $noteText)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(.horitzontal)
Botó(acció: afegirNota) {
Text("Afegeix nota")
.frame(amplada màxima: .infinit)
}
.buttonStyle(.borderedProminent)
.padding(.horitzontal)
Llista {
Per a cada(notes, id: \.self) { nota a
Text (nota)
}
.onDelete(executa: suprimeixNota)
}
}
.navigationTitle("Notes ràpides")
}
}
funció privada addNote() {
let trimmed = noteText.trimmingCharacters(in: .whitespacesAndNewlines)
guarda !trimmed.isEmpty altrament { retorn }
notes.insert(retallat, a: 0)
text de la nota = “”
}
funció privada deleteNote (en desplaçaments: IndexSet) {
notes.eliminar(aOffsets: offsets)
}
}
“
-
5. Explicació important del codi
Alguns conceptes clau per entendre:
– @State: S'utilitza per emmagatzemar dades que canviaran i activar la interfície d'usuari per actualitzar-se en conseqüència.
– `noteText` emmagatzema el text d'entrada.
– `notes` emmagatzema una llista de notes.
– TextField: Component d'entrada de text.
Enllaçar `text: $noteText` significa que el TextField està connectat directament a l'estat `noteText`.
– Button(action:) : Botó per executar la funció `addNote()`.
– List + ForEach: Mostra les dades en forma de llista.
S'utilitza `id: \.self` perquè l'element és una cadena única (per a un exemple senzill).
– onDelete: Permet eliminar elements de la llista amb un gest de lliscament.
-
6. Execució de l'aplicació al simulador
Per executar l'aplicació:
1. A la part superior de Xcode, seleccioneu el dispositiu de destinació, per exemple iPhone 15 (Simulator).
2. Feu clic al botó Executa (icona de triangle ▶).
3. S'obrirà el simulador i l'aplicació s'executarà automàticament.
Prova d'escriure una nota, prem el botó "Afegeix nota" i veuràs que apareix a la llista. Fes lliscar qualsevol element cap a l'esquerra per suprimir-lo.
-
7. Depuració simple
Quan una aplicació no funciona com s'espera, podeu:
– Consulteu el panell de la consola de depuració a la part inferior de Xcode per veure els registres d'errors.
– S'ha afegit `print()` per comprovar els valors de les variables:
"`ràpid
print("Nota afegida:", retallat)
“
A més, Xcode proporciona una funció de punt d'interrupció per aturar el programa en una línia específica i així poder inspeccionar el contingut de les variables.
-
8. Millora de les aplicacions: validació i emmagatzematge de dades
L'aplicació anterior encara emmagatzema notes temporalment (desapareixeran quan es tanqui l'aplicació). Per a la següent etapa de desenvolupament, podeu afegir:
1. Emmagatzematge local (valors predeterminats de l'usuari)
Desa una matriu de notes a UserDefaults per conservar-les després de tancar l'aplicació.
2. Base de dades (Core Data/SQLite)
Apte per a dades més complexes.
3. Funció Edita notes
Crea una vista detallada per modificar el registre.
4. Interfície d'usuari més atractiva
Afegeix icones, colors i un disseny més net.
Com a pas fàcil, podeu començar desant registres a `UserDefaults` utilitzant `JSONEncoder` i `JSONDecoder`.
-
9. Kesimpulan
Swift i SwiftUI proporcionen una manera moderna i ràpida de crear aplicacions per a iOS. En aquest tutorial, heu après a crear un nou projecte per a iOS, a entendre l'estructura bàsica d'una aplicació SwiftUI, a crear una interfície d'usuari senzilla amb camps de text, botons i llistes, i a executar l'aplicació al simulador. Tot i que l'aplicació continua sent senzilla, aquesta base és essencial per passar a funcions més complexes com l'emmagatzematge de dades, la navegació de pàgines i la integració d'API.
Si vols, també et puc ajudar a crear versions més avançades d'aquest tutorial, com ara afegir emmagatzematge persistent amb UserDefaults/Core Data, crear una pàgina de detalls amb NavigationStack o crear una aplicació que obtingui dades d'Internet mitjançant URLSession.
