Bab 3: Membuat Aplikasi Pertamamu dengan Swift dan SwiftUI

Sekarang, kamu seharusnya sudah memasang Xcode dan memiliki pemahaman dasar tentang Swift. Jika kamu melewatkan dua bab pertama, penulis sangat menyarankan kamu untuk berhenti sejenak dan kembali membacanya. Menginstal Xcode wajib dilakukan agar kamu bisa menyelesaikan semua latihan dalam buku ini.

Di bab sebelumnya, kamu sudah bereksperimen dengan membuat komponen UI menggunakan SwiftUI. Pada bab ini, kita akan melangkah lebih jauh dan memberikan pengenalan yang lebih menyeluruh tentang framework SwiftUI. Selain itu, kamu juga akan mendapatkan kesempatan untuk membangun aplikasi iOS pertamamu.

Pengenalan SwiftUI

Pada WWDC 2019, Apple mengejutkan seluruh komunitas developer dengan mengumumkan sebuah framework baru bernama SwiftUI. Ini bukan sekadar mengubah cara kamu membangun aplikasi iOS, tapi ini adalah pergeseran terbesar dalam ekosistem developer Apple (termasuk iPadOS, macOS, tvOS, dan watchOS) sejak Swift pertama kali diperkenalkan.

SwiftUI adalah cara yang inovatif untuk membangun antarmuka pengguna di seluruh platform Apple dengan Swift. Kamu bisa membuat UI untuk perangkat Apple apa pun hanya dengan satu set tools dan API.

— Apple (https://developer.apple.com/xcode/swiftui/)

Sejak dulu, para developer berdebat apakah sebaiknya UI aplikasi dibuat secara visual atau ditulis langsung dalam bentuk kode. Apple menjawab perdebatan ini dengan menghadirkan SwiftUI. Melalui framework inovatif ini, Apple memperkenalkan cara baru dalam membangun antarmuka pengguna. Silakan lihat gambar di bawah ini untuk representasi visualnya, lalu luangkan waktu sejenak untuk memperhatikan kode yang menyertainya.

Dengan hadirnya SwiftUI, sekarang kamu bisa membangun UI aplikasi menggunakan sintaks Swift yang bersifat deklaratif. Ini berarti proses penulisan kode UI menjadi lebih sederhana dan lebih intuitif. Jika dibandingkan dengan framework UI yang sudah lama ada seperti UIKit, kamu bisa menghasilkan desain UI yang sama dengan jauh lebih sedikit kode.

Deklaratif vs Imperatif

Seperti Java, C++, PHP, dan C#, Swift adalah bahasa pemrograman imperatif. Namun, SwiftUI dengan bangga memposisikan dirinya sebagai framework UI deklaratif, yang memungkinkan developer membangun UI dengan cara yang deklaratif. Tapi apa sebenarnya arti dari “deklaratif” itu? Apa bedanya dengan pemrograman imperatif? Dan yang lebih penting, bagaimana perbedaan ini memengaruhi cara kamu menulis kode?

Bagi kamu yang baru belajar pemrograman, perbedaan ini mungkin belum terasa penting, karena semuanya masih baru. Namun, jika kamu sudah memiliki pengalaman dengan pemrograman berorientasi objek atau pernah bekerja dengan UIKit, pergeseran paradigma ini akan sangat memengaruhi cara kamu membangun antarmuka pengguna. Kamu mungkin perlu “melupakan” beberapa konsep lama dan mempelajari pendekatan yang benar-benar baru.

Lalu, apa sebenarnya perbedaan antara pemrograman imperatif dan deklaratif? Jika kamu membuka Wikipedia dan mencari kedua istilah ini, kamu akan menemukan definisi berikut:

tip

Dalam ilmu komputer, pemrograman imperatif adalah sebuah paradigma pemrograman yang menggunakan pernyataan-pernyataan yang mengubah state dari sebuah program. Mirip dengan imperative mood dalam bahasa manusia yang digunakan untuk menyatakan perintah, sebuah program imperatif terdiri dari rangkaian perintah yang harus dijalankan oleh komputer.

Dalam ilmu komputer, pemrograman deklaratif adalah sebuah paradigma pemrograman—sebuah gaya dalam membangun struktur dan elemen program—yang mengekspresikan logika dari sebuah komputasi tanpa harus menjelaskan alur kontrol (control flow) secara eksplisit.

Memahami perbedaan keduanya memang cukup sulit, terutama jika kamu tidak memiliki latar belakang ilmu komputer. Penulis akan menjelaskannya dengan sebuah analogi yang lebih mudah dipahami.

Alih-alih langsung masuk ke dunia pemrograman, mari kita bayangkan proses membuat pizza (atau hidangan apa pun yang kamu suka). Misalkan kamu sedang memberikan instruksi kepada orang lain (misalnya asistenmu) untuk menyiapkan pizza tersebut. Dalam situasi ini, kamu bisa memberi instruksi dengan cara imperatif atau deklaratif. Jika kamu memasak pizza secara imperatif, kamu akan memberi asistenmu instruksi yang sangat rinci, seperti resep langkah demi langkah berikut:

Panaskan oven hingga 550°F atau lebih selama setidaknya 30 menit
Siapkan satu pon adonan
Gilas adonan hingga membentuk lingkaran berdiameter 10 inci
Tuangkan saus tomat ke tengah pizza lalu ratakan hingga ke tepi
Letakkan topping (termasuk bawang, jamur iris, pepperoni, sosis matang, bacon matang, paprika potong dadu, dan keju) di atas saus
Panggang pizza selama 5 menit

Sebaliknya, jika kamu memilih memasak pizza secara deklaratif, kamu tidak perlu memberikan instruksi langkah demi langkah. Kamu cukup menjelaskan seperti apa pizza yang kamu inginkan. Apakah kamu mau adonan yang tebal atau tipis? Apakah kamu ingin topping seperti pepperoni dan bacon, atau Margherita klasik dengan saus tomat? Apakah pizzanya berdiameter 10 inci atau 16 inci? Dengan menyampaikan preferensimu, asistenmu bisa mengurus sisanya dan memasak pizza sesuai dengan yang kamu inginkan.

Itulah inti perbedaan antara imperatif dan deklaratif. Sekarang kita kembali ke pemrograman UI. Pemrograman UI secara imperatif mengharuskan developer menulis instruksi yang sangat detail untuk mengatur tata letak UI dan mengontrol state-nya. Sebaliknya, pemrograman UI secara deklaratif memungkinkan developer hanya mendeskripsikan bagaimana tampilan UI seharusnya dan bagaimana ia bereaksi terhadap perubahan state.

Pendekatan deklaratif membuat kode jauh lebih mudah dibaca dan dipahami. Selain itu, framework SwiftUI memungkinkan kamu menulis jauh lebih sedikit kode saat membangun antarmuka pengguna. Sebagai contoh, bayangkan kamu diminta untuk membuat sebuah tombol berbentuk hati di dalam sebuah aplikasi. Tombol ini harus berada di tengah layar dan merespons sentuhan pengguna. Ketika pengguna mengetuk tombol hati tersebut, warnanya harus berubah dari merah menjadi kuning. Selain itu, saat pengguna menekan dan menahannya, tombol tersebut harus membesar dengan animasi.

Perhatikan gambar di atas. Itu adalah kode yang kamu butuhkan untuk membuat tombol hati. Hanya dengan sekitar 20 baris kode, kamu bisa membuat tombol interkatif dengan scale animation. Ini adalah keuntungan dari framework UI deklaratif seperti SwiftUI.

Membangun Aplikasi Pertamamu Menggunakan SwiftUI

Cukup sudah pembahasan latar belakang tentang framework SwiftUI. Seperti yang selalu penulis katakan, cara terbaik untuk belajar pemrograman adalah langsung praktik. Sekarang saatnya membuka Xcode dan mulai menulis aplikasi iOS pertamamu dengan SwiftUI.

Di sisa bab ini, kamu akan menulis kode untuk mencoba berbagai komponen UI seperti Text, Image, dan Stack Views. Selain itu, kamu juga akan mempelajari cara mendeteksi gesture sentuhan. Dengan menggabungkan semua teknik tersebut, pada akhirnya kamu akan membangun aplikasi pertamamu.

Pertama, jalankan Xcode dan buat aplikasi baru menggunakan template App di bawah kategori iOS. Pilih Next untuk melanjutkan ke layar berikutnya.

Selanjutnya, beri nama aplikasi tersebut HelloWorld. Hello World adalah program yang secara tradisional dibuat oleh programmer saat pertama kali belajar. Ini adalah program yang sangat sederhana yang menampilkan tulisan "Hello, World" di layar perangkat. Meskipun aplikasi pertamamu nanti akan sedikit lebih kompleks dari itu, mari kita tetap mengikuti tradisi pemrograman dan menamai aplikasi ini "HelloWorld".

Organization Identifier adalah pengenal unik untuk aplikasi kamu. Di contoh ini, penulis menggunakan com.appcoda, tetapi kamu sebaiknya mengisinya dengan nilai milikmu sendiri. Jika kamu memiliki website, gunakan nama domainmu dalam format reverse domain name. Jika tidak, kamu bisa menggunakan format com.nama. Misalnya, jika namamu Pikachi, maka isi Organization Identifier dengan com.pikachi.

Xcode saat ini mendukung dua cara untuk membangun antarmuka pengguna. Karena buku ini berfokus pada SwiftUI, silakan set opsi Interface ke SwiftUI. Untuk bahasa pemrograman, pilih Swift.

Untuk opsi Include Tests, kamu bisa membiarkannya tidak dicentang.

Klik Next untuk melanjutkan. Xcode kemudian akan menanyakan di mana kamu ingin menyimpan aplikasi "HelloWorld". Pilih folder apa saja (misalnya Desktop) di Mac kamu. Kamu mungkin akan melihat opsi source control. Untuk sementara, hilangkan centangnya karena kita belum membutuhkannya. Lalu klik Create untuk melanjutkan.

Setelah kamu mengonfirmasi, Xcode akan otomatis membuat aplikasi "HelloWorld". Layar yang tampil akan terlihat seperti yang ditunjukkan pada gambar.

Mengenal Workspace Xcode

Sebelum kita mulai mengimplementasikan aplikasi Hello World, mari kita luangkan beberapa menit untuk melihat sekilas lingkungan kerja (workspace) Xcode. Di panel sebelah kiri terdapat project navigator. Di area ini kamu bisa menemukan semua file yang ada di dalam aplikasimu. Bagian tengah dari workspace adalah editor area. Di sinilah kamu melakukan semua tugas utama, seperti mengubah pengaturan aplikasi, menulis kode, dan mengatur antarmuka pengguna.

Tergantung pada jenis file yang kamu pilih, Xcode akan menampilkan tampilan yang berbeda di editor area. Misalnya, jika kamu memilih HelloWorldApp.swift di project navigator, Xcode akan menampilkan kode sumbernya di area tengah. Xcode juga menyediakan beberapa tema tampilan yang bisa kamu pilih. Jika kamu lebih suka tema gelap, kamu bisa membuka menu Xcode > Preferences > Themes untuk mengubahnya.

Jika kamu memilih file ContentView.swift, Xcode akan secara otomatis mengecilkan editor kode dan menampilkan sebuah panel tambahan di sebelahnya. Panel tambahan ini adalah preview pane untuk ContentView. Jika kamu tidak melihat design canvas, kamu bisa membuka menu Editor > Canvas untuk mengaktifkannya.

Design canvas menampilkan pratinjau dari kode SwiftUI kamu. Xcode merender pratinjau tersebut menggunakan simulator yang kamu pilih di pemilih simulator (misalnya iPhone 15 atau 16 Pro).

Untuk memberi lebih banyak ruang saat menulis kode, kamu bisa menyembunyikan project navigator dan inspector (lihat gambar di atas). Jika kamu ingin mengubah ukuran preview, gunakan ikon pembesar yang ada di pojok kanan bawah.

Menjalankan Aplikasi untuk Pertama Kali

Sampai saat ini, kita belum menulis satu baris kode pun. Kode yang ada di ContentView sepenuhnya dihasilkan oleh Xcode. Sebelum kita mulai menulis kode sendiri, mari kita coba menjalankan aplikasi menggunakan simulator bawaan. Ini akan memberi kamu gambaran tentang bagaimana cara membangun dan menguji aplikasi di Xcode.

Di toolbar, kamu akan melihat tombol Run (berbentuk seperti tombol Play).

Tombol Run di Xcode digunakan untuk membangun (build) aplikasi dan menjalankannya di simulator yang dipilih. Pada contoh di atas, simulator diatur ke iPhone 16 Pro. Jika kamu mengklik tombol iPhone 16 Pro, kamu akan melihat daftar simulator yang tersedia, seperti iPhone SE dan iPhone 16 Pro Max. Mari gunakan iPhone 16 Pro sebagai simulator dan mencobanya.

Setelah simulator dipilih, kamu bisa mengklik tombol Run untuk memuat aplikasimu di dalam simulator. Gambar di bawah menampilkan simulator iPhone 16 Pro. Untuk menghentikan aplikasi, cukup klik tombol Stop di toolbar.

Coba pilih simulator lain (misalnya iPhone SE) lalu jalankan aplikasinya. Kamu akan melihat simulator lain muncul di layar. Versi terbaru Xcode memungkinkan developer menjalankan beberapa simulator secara bersamaan.

Simulator berfungsi hampir sama seperti iPhone sungguhan. Kamu bisa menekan tombol Home (atau menekan Shift–Command–H) untuk menampilkan layar utama. Simulator juga dilengkapi dengan beberapa aplikasi bawaan. Silakan coba-coba dan eksplorasi sendiri agar kamu semakin terbiasa dengan lingkungan Xcode dan simulator.

Bekerja dengan Text

Sekarang kamu seharusnya sudah cukup familiar dengan workspace Xcode, saatnya kita melihat kode SwiftUI. Kode contoh yang dihasilkan di ContentView sudah menunjukkan bagaimana cara menampilkan satu baris teks. Kamu menginisialisasi sebuah objek Text dan memberikan teks yang ingin ditampilkan (misalnya Hello World) seperti ini:

Text("Hello World")

Preview canvas kemudian akan menampilkan tulisan Hello World di layar. Inilah sintaks dasar untuk membuat sebuah text view. Kamu bebas mengubah teksnya menjadi apa pun yang kamu mau, dan canvas akan langsung menampilkan perubahannya secara instan.

Mengubah Jenis dan Warna Font

Di SwiftUI, kamu bisa mengubah berbagai properti sebuah kontrol (misalnya warna, font, atau ketebalan) dengan memanggil method yang dikenal sebagai Modifier. Misalnya, jika kamu ingin membuat teks menjadi tebal, kamu bisa menggunakan modifier fontWeight dan menentukan ketebalan font yang kamu inginkan (misalnya .bold) seperti ini:

Text("Stay Hungry. Stay Foolish.").fontWeight(.bold)

Kamu mengakses modifier dengan menggunakan dot syntax. Setiap kali kamu mengetik tanda titik (.), Xcode akan menampilkan daftar modifier atau nilai yang bisa digunakan. Sebagai contoh, ketika kamu mengetik titik setelah fontWeight, kamu akan melihat berbagai opsi ketebalan font. Kamu bisa memilih bold untuk membuat teks menjadi tebal. Jika ingin lebih tebal lagi, kamu bisa menggunakan heavy atau black.

Dengan memanggil fontWeight dengan nilai .bold, sebenarnya kamu mendapatkan sebuah view baru yang berisi teks yang sudah dibuat tebal. Hal yang menarik dari SwiftUI adalah kamu bisa terus menggabungkan (chaining) view baru ini dengan modifier lainnya. Misalnya, jika kamu ingin membuat teks yang sudah tebal itu menjadi sedikit lebih besar, kamu bisa menulis kodenya seperti ini:

Text("Stay Hungry. Stay Foolish.").fontWeight(.bold).font(.title)

Modifier font memungkinkan kamu mengubah properti font. Pada kode di atas, kita menentukan gaya font title untuk memperbesar ukuran teks. SwiftUI menyediakan beberapa gaya teks bawaan seperti title, largeTitle, body, dan lain-lain. Jika kamu ingin ukuran font yang lebih besar lagi, ganti .title dengan .largeTitle.

Jika kita terus menggabungkan banyak modifier dalam satu baris kode, kodenya akan menjadi sulit dibaca. Karena itu, biasanya kita menuliskannya dalam format berikut dengan memecahnya ke dalam beberapa baris:

Text("Stay Hungry. Stay Foolish.")
    .fontWeight(.bold)
    .font(.title)

Fungsinya tetap sama, tetapi penulis yakin kamu akan merasa kode di atas jauh lebih mudah dibaca. Kita akan terus menggunakan penulisan seperti ini di sepanjang buku.

Modifier font juga memungkinkan kamu mengubah desain teks. Misalnya, jika kamu ingin menggunakan font dengan gaya rounded, kamu bisa menuliskan modifier font seperti ini:

.font(.system(.title, design: .rounded))

Di sini kamu menentukan penggunaan system font dengan gaya teks title dan desain rounded. Preview canvas akan langsung merespons perubahan tersebut dan menampilkan teks dengan sudut yang membulat.

Bekerja dengan Button

Button adalah salah satu komponen UI yang paling umum dan penting untuk kamu ketahui. Ini adalah kontrol UI dasar yang dapat menerima sentuhan pengguna dan memicu suatu aksi.

Untuk membuat sebuah button menggunakan SwiftUI, kamu cukup menggunakan potongan kode berikut:

Button {
    // Aksi yang dijalankan
} label: {
    // Tampilan tombol
}

Saat membuat sebuah button, kamu perlu menyediakan dua blok kode:

Aksi yang dijalankan — kode yang akan dieksekusi ketika tombol diketuk atau dipilih oleh pengguna.
Tampilan tombol — blok kode yang mendeskripsikan tampilan dan gaya dari tombol tersebut.

Sebagai contoh, jika kamu ingin mengubah label Hello World menjadi sebuah tombol, kamu bisa memperbarui kodenya seperti ini:

struct ContentView: View {
    var body: some View {

        Button {

        } label: {
            Text("Hello World")
                .fontWeight(.bold)
                .font(.system(.title, design: .rounded))
        }

    }
}

Teks Hello World kini berubah menjadi sebuah tombol yang bisa diketuk, meskipun kita belum menentukan aksi apa pun yang harus dijalankan. Warna teksnya otomatis berubah menjadi biru karena itu adalah warna default untuk tombol di iOS.

Kamu bisa mencoba untuk mengetuk tombol di preview. Meski tombol tersebut tidak melakukan aksi apapun untuk saat ini, kamu akan melihat efek berkedip saat tombol di ketuk.

Menyesuaikan Gaya Button

Mirip seperti Text, kamu bisa menyesuaikan warna sebuah button dengan menambahkan beberapa modifier. Sebagai contoh, kamu bisa menggunakan modifier foregroundStyle dan background untuk membuat sebuah tombol berwarna ungu.

Button {

} label: {
    Text("Hello World")
        .fontWeight(.bold)
        .font(.system(.title, design: .rounded))
}
.foregroundStyle(.white)
.background(.purple)

Setelah perubahan, tombol kamu akan berubah menjadi seperti gambar di bawah:

Seperti yang kamu lihat, tombol tersebut tidak terlihat cukup bagus. Bukankah lebih bagus lagi kalau ada spasi disekitar teksnya? Untuk menambahkan spasi, gunakan modifier padding seperti ini:

SwiftUI juga memudahkan kamu untuk membuat tombol dengan sudut yang membulat. Kamu hanya perlu menambahkan modifier clipShape dan mengatur nilainya ke RoundedRectangle(cornerRadius: 20) seperti ini:

.clipShape(RoundedRectangle(cornerRadius: 20))

Nilai cornerRadius menentukan seberapa bulat sudut-sudut tombol tersebut. Nilai yang lebih besar akan menghasilkan sudut yang lebih membulat, sedangkan nilai yang lebih kecil akan menghasilkan sudut yang lebih tajam. Kamu bisa mencoba mengubah nilai cornerRadius ke angka lain untuk melihat perbedaannya.

Menambahkan Aksi Saat Button di Klik

Sebuah button tidak akan terlalu berguna jika tidak melakukan apa pun. Tujuan kita adalah membuat tombol tersebut berbicara saat diketuk, dengan mengucapkan frasa "Hello World!".

Tugas ini mungkin terdengar rumit karena melibatkan fitur text-to-speech. Namun, Apple telah membuatnya sangat sederhana, bahkan untuk pemula.

Seperti yang telah disebutkan sebelumnya, iOS SDK menyediakan banyak framework luar biasa yang bisa dimanfaatkan developer. Dalam kasus ini, kita menggunakan SwiftUI untuk membangun antarmuka pengguna. Untuk mengaktifkan fitur text-to-speech, kita akan menggunakan framework AVFoundation.

Sebelum bisa menggunakan framework tersebut, kita perlu mengimpornya di bagian atas kode. Tepat di bawah import SwiftUI, tambahkan baris berikut:

import AVFoundation

Selanjutnya, deklarasikan sebuah variabel di dalam ContentView untuk membuat dan menyimpan speech synthesizer:

let synthesizer = AVSpeechSynthesizer()

Setelah itu, perbarui kode Button seperti berikut:

Button {

    let utterance = AVSpeechUtterance(string: "Hello World")
    utterance.voice = AVSpeechSynthesisVoice(identifier: "com.apple.speech.synthesis.voice.Fred")

    synthesizer.speak(utterance)

} label: {
    Text("Hello World")
        .fontWeight(.bold)
        .font(.system(.title, design: .rounded))
}
.padding()
.foregroundStyle(.white)
.background(.purple)
.clipShape(RoundedRectangle(cornerRadius: 20))

Di sini, kita menambahkan tiga baris kode di dalam blok aksi. Itulah kode yang dibutuhkan untuk memberi instruksi kepada iOS agar mengucapkan sebuah teks. Baris pertama menentukan teks yang akan diucapkan (yaitu "Hello World"), baris kedua mengatur suara ke Bahasa Inggris versi British, dan baris terakhir digunakan untuk mengucapkan teks tersebut dengan suara yang sudah dipilih.

Untuk menguji aplikasi, kamu bisa mengetuk tombol Hello World di preview atau menjalankannya di simulator. Untuk sekarang, mari kita gunakan simulator. Klik tombol Play untuk menjalankan aplikasi, lalu ketuk tombol Hello World untuk mencoba fitur text-to-speech.

Memperkenalkan Stack Views

Aplikasi pertamamu bekerja dengan sangat baik, bukan? Hanya dengan sekitar 10 baris kode, kamu sudah berhasil membuat sebuah aplikasi yang dapat mengubah teks menjadi suara. Saat ini, tombol tersebut dirancang untuk mengucapkan "Hello World". Lalu bagaimana jika kamu ingin menambahkan tombol lain di atas tombol Hello World, yang mengucapkan kalimat atau kata yang berbeda? Bagaimana kamu mengatur tata letak UI-nya?

SwiftUI menyediakan jenis view khusus yang disebut Stack Views untuk membangun antarmuka pengguna yang lebih kompleks. Secara lebih spesifik, stack view memungkinkan kamu menyusun beberapa view (atau komponen UI) secara vertikal atau horizontal (menumpuk / stacking). Sebagai contoh, jika kamu ingin menambahkan sebuah tombol baru di atas tombol Hello World, kamu bisa membungkus kedua tombol tersebut di dalam sebuah VStack seperti ini:

VStack {

  // Button baru di sini

  // Hello World Button di sini
}

VStack adalah vertical stack view yang digunakan untuk menyusun view secara vertikal. Urutan view di dalam sebuah VStack menentukan bagaimana view-view tersebut ditata. Pada kode di atas, tombol baru akan ditempatkan di atas tombol Hello World.

Sekarang mari kita ubah kode yang sebenarnya untuk melihat hasilnya. Untuk membungkus tombol Hello World ke dalam sebuah VStack, kamu bisa menahan tombol Control lalu mengklik Button. Di menu konteks yang muncul, pilih Embed in VStack. Xcode kemudian akan membungkus tombol Hello World tersebut di dalam sebuah view VStack.

Setelah kamu membungkus tombol Hello World ke dalam VStack, duplikasikan kode tombol Hello World tersebut untuk membuat tombol baru seperti ini:

VStack {

    Button {
        let utterance = AVSpeechUtterance(string: "Hello Programming")
        utterance.voice = AVSpeechSynthesisVoice(identifier: "com.apple.speech.synthesis.voice.Fred")
        synthesizer.speak(utterance)

    } label: {
        Text("Hello Programming")
            .fontWeight(.bold)
            .font(.system(.title, design: .rounded))
    }
    .padding()
    .foregroundStyle(.white)
    .background(.yellow)
    .clipShape(RoundedRectangle(cornerRadius: 20))

    Button {
        let utterance = AVSpeechUtterance(string: "Hello World")
        utterance.voice = AVSpeechSynthesisVoice(identifier: "com.apple.speech.synthesis.voice.Fred")
        synthesizer.speak(utterance)

    } label: {
        Text("Hello World")
            .fontWeight(.bold)
            .font(.system(.title, design: .rounded))
    }
    .padding()
    .foregroundStyle(.white)
    .background(.purple)
    .clipShape(RoundedRectangle(cornerRadius: 20))
}

Label dari tombol baru diubah menjadi Happy Programming dan warna latar belakangnya juga diperbarui menjadi .yellow. Selain itu, parameter string dari AVSpeechUtterance diubah menjadi "Happy Programming." Kamu bisa merujuk ke gambar untuk melihat perubahan tersebut.

Beginilah cara kamu menyusun dua tombol secara vertikal. Kamu bisa menjalankan aplikasinya untuk melakukan uji coba singkat. Tombol Happy Programming bekerja persis seperti tombol Hello World, tetapi akan mengucapkan "Happy Programming!".

Memahami Method

Sebelum kita mengakhiri bab ini, penulis ingin memperkenalkan satu konsep dasar pemrograman lainnya. Coba perhatikan kembali kode ContentView. Ada cukup banyak kemiripan dan kode yang terduplikasi pada kedua tombol. Salah satu bagian yang terduplikasi adalah kode di dalam blok aksi dari masing-masing tombol.

Kedua blok kode tersebut hampir sama, kecuali teks yang dibacakan berbeda. Yang satu adalah "Happy Programming", sedangkan yang lain adalah "Hello World."

Di Swift, kamu bisa mendefinisikan sebuah method untuk menangani jenis tugas yang berulang seperti ini. Dalam kasus ini, kita bisa membuat sebuah method bernama speak di dalam ContentView seperti berikut:

func speak(text: String) {
    let utterance = AVSpeechUtterance(string: text)
    utterance.voice = AVSpeechSynthesisVoice(identifier: "com.apple.speech.synthesis.voice.Fred")

    synthesizer.speak(utterance)
}

Perintah func digunakan untuk mendeklarasikan sebuah method. Setelah func adalah nama method. Nama ini berfungsi untuk mengidentifikasi method tersebut dan memudahkan kamu memanggilnya di bagian lain. Sebuah method juga bisa menerima parameter sebagai input. Parameter didefinisikan di dalam tanda kurung. Setiap parameter harus memiliki nama dan tipe data, yang dipisahkan oleh tanda titik dua (:). Dalam contoh ini, method menerima sebuah parameter bernama text yang bertipe String.

Di dalam method tersebut terdapat baris-baris kode untuk mengubah teks menjadi suara. Satu-satunya perubahan ada pada baris kode ini:

let utterance = AVSpeechUtterance(string: text)

Kita mengatur parameter string sebagai text, yaitu teks yang dikirimkan oleh pemanggil method.

Sekarang setelah method tersebut dibuat, bagaimana cara memanggilnya? Kamu cukup menggunakan nama method dan memberikan parameter yang dibutuhkan seperti ini:

speak(text: "Hello World")

Sekarang kembali ke struktur ContentView untuk memodifikasi kodenya. Pertama, buat method speak(text: String) seperti yang ditunjukkan pada gambar. Selanjutnya, kamu bisa mengganti blok aksa pada kedua tombol dengan memanggil method speak.

Method baru ini tidak mengubah fungsi aplikasi sama sekali. Kedua tombol tetap bekerja persis seperti sebelumnya. Namun, seperti yang bisa kamu lihat dari kode akhir, strukturnya menjadi lebih rapi dan lebih mudah dibaca.

Dan bagaimana jika kamu ingin menambahkan tombol text-to-speech lain ke dalam aplikasi? Kamu tidak perlu lagi menduplikasi empat baris kode tersebut. Cukup panggil method speak dengan teks yang ingin dibacakan. Inilah alasan mengapa kita perlu mengelompokkan operasi yang sama ke dalam suatu method.

Latihan

Untuk membantu kamu benar-benar memahami cara kerja button dan method, berikut ini ada sebuah latihan sederhana. Tugasmu adalah memodifikasi kode yang sudah ada dan membangun sebuah aplikasi bernama "Guess These Movies" (Tebak Film). UI dan fungsinya sangat mirip dengan aplikasi Hello World. Setiap tombol menampilkan sekumpulan ikon emoji. Tugas pemain adalah menebak judul film berdasarkan emoji tersebut. Saat tombol diketuk, aplikasi akan mengucapkan jawaban yang benar.

Sebagai contoh, ketika pemain mengetuk tombol berwarna biru, aplikasi akan mengatakan: "The answer is Ocean 11!"

Ringkasan

Selamat! Kamu telah berhasil membangun aplikasi iPhone pertamamu. Memang ini masih aplikasi yang sederhana, tetapi penulis yakin sekarang kamu sudah memiliki pemahaman yang jauh lebih baik tentang Xcode, SwiftUI, dan berbagai framework bawaan yang disediakan oleh iOS SDK. Ternyata lebih mudah dari yang kamu bayangkan, bukan?

Kamu bisa mengunduh referensi kode contoh di http://www.appcoda.com/resources/swift6/swiftui-helloworld.zip. Bila ingin melihat solusi atas latihan di atas, unduh kodenya di http://www.appcoda.com/resources/swift6/swiftui-guessthesemovies.zip

Pengenalan SwiftUI​

Deklaratif vs Imperatif​

Membangun Aplikasi Pertamamu Menggunakan SwiftUI​

Mengenal Workspace Xcode​

Menjalankan Aplikasi untuk Pertama Kali​

Bekerja dengan Text​

Mengubah Jenis dan Warna Font​

Bekerja dengan Button​

Menyesuaikan Gaya Button​

Menambahkan Aksi Saat Button di Klik​

Memperkenalkan Stack Views​

Memahami Method​

Latihan​

Ringkasan​