Tutorijal o kreiranju iOS aplikacija pomoću Swifta
Izrada iOS aplikacija nikada nije bila lakša zahvaljujući Appleovom sveobuhvatnom razvojnom ekosistemu kroz Xcode i programski jezik Swift. U ovom članku ćete naučiti osnovni tok izrade iOS aplikacije pomoću Swifta, od postavljanja alata, kreiranja novog projekta, dizajniranja interfejsa i pokretanja aplikacije u simulatoru. Iako je ovaj tutorijal uvodni, koraci bi trebali biti dovoljni da vam pomognu da kreirate jednostavnu, funkcionalnu aplikaciju.
-
1. Priprema alata i zahtjeva
Prije nego što počnete pisati kod , provjerite imate li sljedeće uređaje i softver:
1. MacBook/iMac (ili macOS na Apple uređajima), budući da Xcode službeno radi samo na macOS-u.
2. Xcode (besplatno preuzimanje iz Mac App Store-a). Xcode uključuje uređivač koda, simulator za iPhone i alate za izgradnju i otklanjanje grešaka.
3. Swift (uključen u Xcode).
4. (Opcionalno) Apple Developer račun za instalaciju na fizičke uređaje i objavljivanje u App Storeu.
Nakon što je Xcode instaliran, otvorite aplikaciju i pričekajte da se proces instalacije dodatnih komponenti završi ako je potrebno.
-
2. Kreirajte novi projekat u Xcode-u
1. Otvorite Xcode.
2. Odaberite Kreiraj novi Xcode projekt.
3. U odjeljku predložaka odaberite:
- iOS
- Aplikacija
4. Kliknite na Dalje, a zatim popunite konfiguraciju projekta:
– Naziv proizvoda: na primjer `HelloSwiftApp`
– Tim: odaberite svoj račun (može ostati prazno ako niste prijavljeni)
– Identifikator organizacije: na primjer `com.devname`
– Interfejs: odaberite SwiftUI (moderniji i jednostavniji za početnike)
Napomena: Ako želite UIKit, možete odabrati Storyboard, ali ovaj tutorijal se fokusira na SwiftUI.
– Jezik: Swift
5. Kliknite na Dalje i odaberite lokaciju za pohranu projekta, a zatim kliknite na Kreiraj .
Nakon što je projekat kreiran, vidjet ćete strukturu datoteka poput `HelloSwiftAppApp.swift` i `ContentView.swift`.
-
3. Razumijevanje osnovne strukture SwiftUI projekta
U SwiftUI-ju, početna tačka aplikacije je obično datoteka `YourAppNameApp.swift`. Na primjer:
“`swift
uvoz SwiftUI-ja
@glavni
struktura HelloSwiftAppApp: Aplikacija {
var tijelo: neka scena {
Grupa prozora {
Prikaz sadržaja()
}
}
}
"`
Kratko objašnjenje:
– `@main` označava ulaznu tačku aplikacije.
– `WindowGroup` je glavni kontejner prikaza.
– `ContentView()` je prvi prikazani prikaz.
U međuvremenu, `ContentView.swift` sadrži glavni prikaz:
“`swift
uvoz SwiftUI-ja
struct ContentView: Pregled {
var body: some View {
Tekst („Zdravo, svijete!“)
.padding()
}
}
"`
-
4. Kreiranje jednostavnog korisničkog interfejsa: Aplikacija „Brze bilješke“
Da bismo stvari učinili zanimljivijima, kreirat ćemo jednostavnu aplikaciju pod nazivom „Brze bilješke“ koja korisnicima omogućava kucanje bilješki i njihovo prikazivanje kao liste.
Korak 1: Kreiranje stanja za unos i listu
Promijenite `ContentView.swift` u:
“`swift
uvoz SwiftUI-ja
struct ContentView: Pregled {
@State privatna varijabla noteText: String = “”
@State privatna varijabla bilješke: [String] = []
var body: some View {
NavigacijskiPrikaz {
VStack(razmak: 16) {
TextField("Napišite bilješku...", tekst: $noteText)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding(.horizontal)
Dugme(akcija: dodajNapomenu) {
Tekst („Dodaj napomenu“)
.frame(maxWidth: .infinity)
}
.buttonStyle(.borderedProminent)
.padding(.horizontal)
Lista {
ForEach(bilješke, id: \.self) { bilješka u
Tekst (bilješka)
}
.onDelete(izvrši: deleteNote)
}
}
.navigationTitle(“Brze bilješke”)
}
}
privatna funkcija dodajNapomenu() {
neka trimmed = noteText.trimmingCharacters(u: .bijeliprostoriINoviredovi)
čuvar !trimmed.isEmpty inače { vratiti }
notes.insert(skraćeno, na: 0)
napomenaTekst = ""
}
privatna funkcija deleteNote(na pomacima: IndexSet) {
notes.remove(atOffsets: ofset)
}
}
"`
-
5. Važno objašnjenje koda
Neki ključni koncepti koje treba razumjeti:
– @State: Koristi se za pohranjivanje podataka koji će se promijeniti i pokrenuti ažuriranje korisničkog interfejsa u skladu s tim.
– `noteText` pohranjuje uneseni tekst.
– `notes` pohranjuje listu bilješki.
– TextField: Komponenta za unos teksta.
Povezivanje `text: $noteText` znači da je TextField direktno povezano sa stanjem `noteText`.
– Button(akcija:) : Dugme za pokretanje funkcije `addNote()`.
– Lista + ZaSvaki: Prikazuje podatke u obliku liste.
`id: \.self` se koristi jer je stavka jedinstveni niz znakova (npr. jednostavan primjer).
– onDelete: Omogućava brisanje stavki sa liste prevlačenjem prsta.
-
6. Pokretanje aplikacije u simulatoru
Da biste pokrenuli aplikaciju:
1. Na vrhu Xcode-a odaberite ciljni uređaj, na primjer iPhone 15 (Simulator).
2. Kliknite na dugme Pokreni (ikona trougla ▶).
3. Simulator će se otvoriti, a zatim će se aplikacija automatski pokrenuti.
Pokušajte upisati bilješku, pritisnuti dugme "Dodaj bilješku" i vidjeti kako se pojavljuje na listi. Prevucite bilo koju stavku ulijevo da biste je izbrisali.
-
7. Jednostavno otklanjanje grešaka
Kada aplikacija ne radi kako se očekuje, možete:
– Pogledajte panel Debug Console na dnu Xcode-a za zapise o greškama.
– Dodat je `print()` za provjeru vrijednosti varijabli:
“`swift
print(“Napomena dodana:”, skraćeno)
"`
Osim toga, Xcode pruža funkciju prekidne tačke za zaustavljanje programa na određenoj liniji kako biste mogli pregledati sadržaj varijabli.
-
8. Poboljšanje aplikacija: Validacija i pohrana podataka
Gornja aplikacija i dalje privremeno pohranjuje bilješke (one će nestati kada se aplikacija zatvori). Za sljedeću fazu razvoja možete dodati:
1. Lokalna pohrana (Korisničke zadane postavke)
Sačuvaj niz bilješki u UserDefaults da bi se sačuvale nakon zatvaranja aplikacije.
2. Baza podataka (Core Data/SQLite)
Pogodno za složenije podatke.
3. Funkcija uređivanja bilješki
Kreirajte detaljni prikaz da biste izmijenili zapis.
4. Atraktivniji korisnički interfejs
Dodajte ikone, boje i čistiji raspored.
Kao jednostavan korak, možete početi spremanjem zapisa u `UserDefaults` koristeći `JSONEncoder` i `JSONDecoder`.
-
9. Kesimpulan
Swift i SwiftUI pružaju moderan i brz način za izradu iOS aplikacija. U ovom tutorijalu ste naučili kako kreirati novi iOS projekat, razumjeti osnovnu strukturu SwiftUI aplikacije, izgraditi jednostavan korisnički interfejs s tekstualnim poljima (TextFields), dugmadima (Buttons) i listama (Lists), te pokrenuti aplikaciju u simulatoru. Iako je aplikacija još uvijek jednostavna, ova osnova je ključna za prelazak na složenije funkcije poput pohrane podataka, navigacije stranicama i API integracije.
Ako želite, mogu vam pomoći i u kreiranju naprednijih verzija ovog tutorijala, kao što je dodavanje trajne memorije pomoću UserDefaults/Core Data, kreiranje stranice s detaljima pomoću NavigationStack-a ili kreiranje aplikacije koja dohvaća podatke s interneta pomoću URLSession-a.
