Hy jumpa lagi :D, artikel ini merupakan kelanjutan dari artikel sebelumnya. Pada bagian kedua ini kita akan mencoba membuat hingga tahap menampilkan data :). Berikut adalah tahapan development yang akan kita lakukan.
- Apa Itu Storyboards, xib dan auto layout ?
- Membuat View Dan Navigation
- Membuat Service Dengan RxSwift Dan Alamofire
- Membuat Helper Dan Controller
Apa Itu Storyboards, XIB dan Auto Layout ?
Storyboard merupakan salah satu fitur untuk melakukan desain aplikasi. Pada zaman dulu, developer hanya dapat menggunakan fitur XIB. Storyboard dan XIB sama - sama mempunyai fungsi untuk melakukan desain interface aplikasi, akan tetapi pada zaman sekarang developer apple merekomendasikan untuk menggunakan storyboard. Di dalam story board kita dapat menggunakan beberapa layer aplikasi seperti gambar berikut.
Sehingga anda dapat mengetahui alur dari aplikasi tersebut secara detail. Berbeda dengan XIB, di dalam xib kita hanya dapat menggunakan 1 layer aplikasi saja seperti gambar berikut.
Akan tetapi, ketika dihadapkan dengan suatu project besar maka kedua nya akan tetap bisa kita gunakan karena masing - masing dari mereka berdua mempunyai kelebihan dan kekurangan masing - masing misalnya jika kita menggunakan 1 storyboard dengan banyak layer maka proses membuka storyboard tersebut akan memakan waktu lama disebabkan banyak nya layer di dalam nya.
Bagaimana dengan auto layout ?
Auto Layout biasanya digunakan jika kita akan mendevelop aplikasi dengan berbagai ukuran layar
Biasanya kita tidak hanya terpaku di 1 ukuran layar saja, kita diharuskan untuk membuat untuk beberapa ukuran layar maka kita dapat menggunakan fitur auto layout. Fitur auto layout ini sangat mirip dengan fitur constraint nya android. Berikut adalah percobaan untuk membuat auto layout.
Membuat Contoh Auto Layout
Silahkan buat sebuah project, lalu silahkan drag button dari menu kanan bawah seperti berikut.
Setelah selesai, silahkan klik menu berikut lalu sesuaikan property nya seperti berikut.
dan kemudian pilih add 4 constrains. Maka secara otomatis button kalian akan seperti berikut.
Gambar diatas telah diubah warna backgroud dan warna tulisan nya, untuk mengubahnya, kamu dapat menggunakan menu seperti gambar berikut.
Silahkan dijalankan di beberapa emulator untuk melihat hasil nya :).
Membuat View Dan Navigation
Oke, kembali ke project yang akan kita buat. Pada bagian ini kita akan membuat view dan navigation view. Secara default project anda hanya memiliki 1 storyboard yaitu main.storyboard. Silahkan buka storyboard tersebut, lalu pilih view controller nya, pada menu bagian atas silahkan pilih editor lalu pilih embed in dan terakhir pilih navigation controller maka akan muncul output seperti berikut.
Setelah selesai, silahkan drag 1 table view ke view controller, lalu berikan constraint seperti berikut.
Selanjutnya silahkan buat 1 group yaitu views, di dalam group views kita akan membuat view khusus untuk menampilkan list data lagu. Karena kita menggunakan table view, maka kita membutuhkan table view cell untuk list cell nya. Untuk membuat table view cell, silahkan klik kanan pada group views, lalu pilih new file, lalu pilih cocoa touch class, lalu klik next dan isikan property nya seperti berikut.
Maka akan muncul 2 file yaitu TrackTableViewCell.swift
dan TrackTableViewCell.xib
. Silahkan buka yang xib lalu silahkan membuat desain seperti berikut.
Setelah selesai, silahkan ikuti tutorial berikut untuk konfigurasi dari view table cell ke controller table cell.
Tahap selanjutnya, silahkan ikuti tutorial berikut untuk main storyboard.
Membuat Service Dengan RxSwift Dan Alamofire
Pada bagian ini, kita akan membuat service. Biasanya service disini saya gunakan untuk melakukan request data ke API. Untuk melakukan request data, kita akan menggunakan Alamofire. Untuk melakukan parsing json ke object swift biasanya saya menggunakan ObjectMapper. Untuk membuat aplikasi suatu event request yang asynchronous maka kita gunakan RxSwift, bagi anda yang ingin memperdalam tentang reactivex silahkan baca di ReactiveX.
Silahkan buat sebuah group dengan nama services
lalu buatlah sebuah file swift dengan nama TrackService
di dalam group service tersebut. Lalu isikan kodingan seperti berikut.
Dengan menggunakan RxSwift maka kita dapat menggunakan fitur Observable, fitur ini mirip dengan fitur List di java. Disana terdapat 3 parameter yaitu parameters biasanya ini untuk parameter yang akan kita search, offset sebagai halaman ke berapa karena pada api ini kita menggunakan paging, dan yang terakhir adalah limit yang berfungsi untuk mendeklarasikan berapa per halaman yang akan kita tampilkan.
Membuat Helper Dan Controller
Tahap terakhir kita akan membuat helper dan controller. Helper disini sendiri biasanya kita buat agar helper ini dapat digunakan di banyak tempat. Contohnya adalah, jika kita melakukan request, dimana jika kita menggunakan parameter dan parameter tersebut mempunyai spasi maka kita harus menconvert spasi dengan +
, akan tetapi fungsi merubah karakter ini bergantung dari kebutuhan API, ada yang mengharuskan diubah menjadi +
atau ada juga menggunakan %20
dan lain sebagainya.
Silahkan buat sebuah group dengan nama helpers
lalu buat sebuah file swift dengan nama ConvertString
, kemudian masukkan kodingan seperti berikut.
Pada class diatas terdapat 2 fungsi yaitu, fungsi toPlusString
berfungsi untuk me replace string kosong dengan karakter +
. Sedangkan fungsi fromArrayArtistToString
kita gunakan untuk menconvert dari array object Artist
menjadi string biasa.
Selanjutnya silahkan buka kembali file TrackTableViewCell
lalu ubah codingan nya menjadi seperti berikut.
Pada kodingan diatas, kita mendeklarasikan text marquee, tujuan nya adalah jika terdapat text yang panjang melebihi lebar view, maka secara otomatis text tersebut akan berjalan sehingga semua tulisan dapat anda baca. Setelah selesai, silahkan buka file ViewController
lalu ubah kodingannya menjadi seperti berikut.
Karena kita membutuhkan delegate
atau action untuk table, maka kita membutuhkan sebuah class extension, dimana class ini berfungsi untuk memisahkan fungsi implementasi class Protocol
. Class Protocol
ini sama seperti class interface yang ada di java. Silahkan tambahkan codingan extension berikut di akhir baris.
Karena dia ingin menampilkan data maka kita juga membutuhkan dataSource, silahkan buat 1 extension lagi untuk dataSource seperti berikut.
Function pertama berfungsi sebagai mendefinisikan jumlah data. Pada function kedua, kita melakukan load file xib, dimana file xib ini adalah table view cell, nah data nya akan kita input melalui parent class nya yaitu ViewController
, dan pada function terakhir mendefinisikan tinggi dari xib.
Jika telah selesai, silahkan jalankan project nya, jika berhasil maka anda dapat melihat hasil nya seperti berikut :D.
Artikel selanjutnya akan membahas mengenai bagaimana cara membuat search bar :). Untuk source code diatas dapat anda akses di Belajar-iOS. Sekian artikel mengenai Belajar iOS bagian 2, jika ada saran dan komentar silahkan isi dibawah dan terima kasih :)