Tutorial tentang Mencipta Aplikasi iOS Menggunakan Swift
Membina aplikasi iOS tidak pernah semudah ini hasil daripada ekosistem pembangunan komprehensif Apple melalui Xcode dan bahasa pengaturcaraan Swift. Dalam artikel ini, anda akan mempelajari aliran asas membina aplikasi iOS menggunakan Swift, daripada menyediakan alatan, mencipta projek baharu, mereka bentuk antara muka dan menjalankan aplikasi dalam simulator. Walaupun tutorial ini hanyalah pengenalan, langkah-langkahnya sepatutnya mencukupi untuk membantu anda mencipta aplikasi yang mudah dan berfungsi.
-
1. Penyediaan Alatan dan Keperluan
Sebelum anda mula menulis kod , pastikan anda mempunyai peranti dan perisian berikut:
1. MacBook/iMac (atau macOS pada peranti Apple), kerana Xcode secara rasminya hanya berjalan pada macOS.
2. Xcode (muat turun percuma dari Mac App Store). Xcode merangkumi editor kod, simulator iPhone dan alat binaan dan penyahpepijatan.
3. Swift (termasuk dalam Xcode).
4. (Pilihan) Akaun Pembangun Apple untuk pemasangan pada peranti fizikal dan penerbitan pada App Store.
Setelah Xcode dipasang, buka aplikasi dan tunggu proses pemasangan komponen tambahan selesai jika perlu.
-
2. Cipta Projek Baharu dalam Xcode
1. Buka Xcode.
2. Pilih Cipta projek Xcode baharu.
3. Dalam bahagian templat, pilih:
- iOS
- Aplikasi
4. Klik Seterusnya , kemudian isikan konfigurasi projek:
– Nama Produk: contohnya `HelloSwiftApp`
– Pasukan: pilih akaun anda (boleh kosong jika anda tidak log masuk)
– Pengenalpasti Organisasi: contohnya `com.devname`
– Antara Muka: pilih SwiftUI (lebih moden dan lebih ringkas untuk pemula)
Nota: Jika anda mahukan UIKit, anda boleh memilih Storyboard, tetapi tutorial ini memberi tumpuan kepada SwiftUI.
– Bahasa: Pantas
5. Klik Seterusnya dan pilih lokasi storan projek, kemudian klik Cipta.
Sebaik sahaja projek dicipta, anda akan melihat struktur fail seperti `HelloSwiftAppApp.swift` dan `ContentView.swift`.
-
3. Memahami Struktur Asas Projek SwiftUI
Dalam SwiftUI, titik permulaan sesuatu aplikasi biasanya ialah fail `YourAppNameApp.swift`. Contohnya:
“`pantas
import SwiftUI
@utama
struct HelloSwiftAppApp: Aplikasi {
var badan: beberapa Adegan {
Kumpulan Tetingkap {
Paparan Kandungan()
}
}
}
""
Penjelasan ringkas:
– `@main` menandakan titik masuk aplikasi.
– `WindowGroup` ialah bekas paparan utama.
– `ContentView()` ialah paparan pertama yang dipaparkan.
Sementara itu, `ContentView.swift` mengandungi paparan utama:
“`pantas
import SwiftUI
struct ContentView: Lihat {
var body: some View {
Teks ("Helo, dunia!")
.padan()
}
}
""
-
4. Mencipta UI Mudah: Aplikasi “Nota Pantas”
Untuk menjadikan sesuatu lebih menarik, kita akan mencipta aplikasi mudah yang dipanggil "Nota Pantas" yang membolehkan pengguna menaip nota dan memaparkannya sebagai senarai.
Langkah 1: Mencipta Negeri untuk Input dan Senarai
Tukar `ContentView.swift` kepada:
“`pantas
import SwiftUI
struct ContentView: Lihat {
@State var peribadi notaTeks: Rentetan = “”
@State nota var peribadi: [String] = []
var body: some View {
Paparan Navigasi {
VStack(jarak: 16) {
TextField(“Tulis nota…”, teks: $noteText)
.gayaMedanTeks(GayaMedanTeksSempadanBulat())
.padan(.mendatar)
Butang(tindakan: addNote) {
Teks (“Tambah Nota”)
.bingkai(LebarMaks: .infiniti)
}
.buttonStyle(.borderedProminent)
.padan(.mendatar)
Senarai {
ForEach(nota, id: \.self) { nota dalam
Teks (nota)
}
.onDelete(laksanakan: deleteNote)
}
}
.navigationTitle(“Nota Ringkas”)
}
}
fungsi peribadi addNote() {
biarkan dipangkas = noteText.trimmingCharacters(dalam: .whitespacesAndNewlines)
pengawal !trimmed.isKosongkan jika tidak { kembali }
notes.insert(dipangkas, pada: 0)
notaTeks = “”
}
private func deleteNote(at offsets: IndexSet) {
notes.remove(atOffsets: ofset)
}
}
""
-
5. Penjelasan Kod Penting
Beberapa konsep utama yang perlu difahami:
– @State : Digunakan untuk menyimpan data yang akan berubah dan mencetuskan UI untuk dikemas kini dengan sewajarnya.
– `noteText` menyimpan teks input.
– `nota` menyimpan senarai nota.
– MedanTeks : Komponen input teks.
Pengikatan `text: $noteText` bermaksud TextField disambungkan secara langsung kepada keadaan `noteText`.
– Butang(action:) : Butang untuk menjalankan fungsi `addNote()`.
– Senarai + Untuk Setiap : Memaparkan data dalam bentuk senarai.
`id: \.self` digunakan kerana item tersebut merupakan rentetan unik (contoh mudah).
– onDelete : Membenarkan pemadaman item daripada senarai dengan gerak isyarat leret.
-
6. Menjalankan Aplikasi dalam Simulator
Untuk menjalankan aplikasi:
1. Di bahagian atas Xcode, pilih peranti sasaran, contohnya iPhone 15 (Simulator).
2. Klik butang Jalankan (ikon segi tiga ▶).
3. Simulator akan dibuka, kemudian aplikasi akan berjalan secara automatik.
Cuba taip nota, tekan butang “Tambah Nota” dan lihat ia muncul dalam senarai. Leret mana-mana item ke kiri untuk memadamkannya.
-
7. Penyahpepijatan Mudah
Apabila aplikasi tidak berfungsi seperti yang dijangkakan, anda boleh:
– Lihat panel Konsol Debug di bahagian bawah Xcode untuk log ralat.
– Menambah `print()` untuk menyemak nilai pembolehubah:
“`pantas
cetak(“Nota ditambah:”, dipotong)
""
Di samping itu, Xcode menyediakan ciri titik putus untuk menghentikan program pada baris tertentu supaya anda boleh memeriksa kandungan pembolehubah.
-
8. Memperbaiki Aplikasi: Pengesahan dan Penyimpanan Data
Aplikasi di atas masih menyimpan nota buat sementara waktu (nota akan hilang apabila aplikasi ditutup). Untuk peringkat pembangunan seterusnya, anda boleh menambah:
1. Storan Tempatan (UserDefaults)
Simpan pelbagai nota ke UserDefaults untuk kekal selepas aplikasi ditutup.
2. Pangkalan Data (Data Teras/SQLite)
Sesuai untuk data yang lebih kompleks.
3. Ciri Edit Nota
Cipta paparan butiran untuk mengubah suai rekod.
4. UI Lebih Menarik
Tambahkan ikon, warna dan susun atur yang lebih kemas.
Sebagai langkah mudah, anda boleh mulakan dengan menyimpan rekod ke `UserDefaults` menggunakan `JSONEncoder` dan `JSONDecoder`.
-
9. Kesimpulannya
Swift dan SwiftUI menyediakan cara moden dan pantas untuk membina aplikasi iOS. Dalam tutorial ini, anda mempelajari cara mencipta projek iOS baharu, memahami struktur asas aplikasi SwiftUI, membina UI ringkas dengan TextFields, Butang dan Senarai serta menjalankan aplikasi dalam simulator. Walaupun aplikasi masih ringkas, asas ini penting untuk beralih kepada ciri yang lebih kompleks seperti storan data, navigasi halaman dan penyepaduan API.
Jika anda mahu, saya juga boleh membantu anda mencipta versi tutorial ini yang lebih lanjut, seperti menambah storan berterusan dengan UserDefaults/Core Data, mencipta halaman butiran dengan NavigationStack atau mencipta aplikasi yang mengambil data dari internet menggunakan URLSession.
