Warming up

Kali ini kita akan pemanasan dulu sebelum masuk ke materi inti Swift & iOS Development. Silahkan untuk follow-along langkah demi langkah membuat proyek iOS pertama di Xcode dengan bahasa pemrograman Swift.

Jangan khawatir apabila belum memahami code-code nya, karena tujuan di sesi warming up ini adalah untuk perkenalan Xcode 13, seperti apa tampilannya dan bagaimana running project iOS ke Simulator iPhone 13 Pro.

Bisa dibilang ini adalah proyek aplikasi iOS pertama kita. Untuk bisa mengikuti step by step warming up proyek iOS ini adalah Konsentrasi 🧑🏻‍💻

Hasil akhir yang diharapkan bisa seperti ini:

Full source code -> Github

Xcode Project#

Buka aplikasi Xcode, lalu pilih Create a new Xcode project:

Pilih App:

Beri nama project (perhatikan poin 1 s.d 4 pada gambar dibawah, harap diikuti isiannya, kecuali yang poin 2 itu silahkan diisi apa aja selama formatnya com.namaorganisasi):

Pilih tempat lokasi file project akan disimpan. Dan jangan lupa checklist pada bagian Create Git repository on my Mac. Terkait Git repository akan ada topiknya tersendiri di sesi Bootcamp nanti.

Berikutnya, karena tadi kita checklis Git repository dan mungkin belum ada author infonya, maka akan muncul popup seperti ini:

Tinggal klik saja tombol Fix, lalu setelah itu isikan dengan value seperti contoh dibawah ini:

Project Setting#

Setelah mengisi author info, muncul tampilan project setting seperti gambar dibawah. Perhatikan yang kita checklist adalah seperti yang ada di poin 1 dan 2 saja. Basically ini untuk mengatur orientasi devicedan target device yang akan digunakan.

Create File Artwork.swift#

Setelah mengatur project setting di Xcode, buat sebuah file baru dan beri nama Artwork seperti contoh pada gambar dibawah. File ini akan menampung dummy data dari list artwork di proyek aplikasi iOS pertama kita.

Untuk template filenya, kita pilih Swift file, lalu klik tombol Next:

Beri nama filenya Artwork, lalu klik Create

Isi dari file Artwork.swift seperti gambar dibawah, silahkan ketik ulang codenya supaya bisa merasakan experience autocomplete code (Xcode code completion feature):

import Foundation
struct Artwork {
    let authorName: String
    let description: String
    let thumbnailFileName: String
    static func fetchArtwork () -> [Artwork] {
        let a1 = Artwork(authorName: "Paolo Sala", description: "Garden Terrace of Turkey", thumbnailFileName: "a1")
        let a2 = Artwork(authorName: "Henri Émilien Rousseau", description: "La chasse au faucon", thumbnailFileName: "a2")
        let a3 = Artwork(authorName: "August Macke", description: "Unter den Lauben von Thun", thumbnailFileName: "a3")
        let a4 = Artwork(authorName: "Paul Sérusier", description: "La Petite Anse", thumbnailFileName: "a4")
        let a5 = Artwork(authorName: "Eduard Schulz-Briesen", description: "The Young Artist", thumbnailFileName: "a5")
        let a6 = Artwork(authorName: "Wassily Wassilyevich Kandinsky", description: "Zubovsky Platz (1916)", thumbnailFileName: "a6")
        return [a1, a2, a3, a4, a5, a6]
    }
}

Image Assets#

Kita akan import file-file Artwork yang sudah saya siapkan. Silahkan download di link ini

Caranya dengan drag and drop ke folder Assets seperti contoh gambar bergerak dibawah ini:

Berikutnya, delete files ViewController.swift bawaan Xcode karena kita akan membuat file *ViewController baru dari awal.

Pilih Move to Trash:

Jalankan proyek Xcode untuk memastikan tidak ada error:

So far aman, simulator iPhone 13 Pro nya muncul dan tidak ada error:

Navigation Controller#

Kembali ke file Main, lalu kita akan menghapus ViewController bawaan Xcode untuk nantinya kita ganti dengan NavigationController. Jangan khawatir kalau bingung apa itu ViewController dan NavigationController, di sesi Bootcamp nanti akan dijelaskan detail.

Dan untuk membuat NavigationController, bisa dengan cara klik tombol Object Library di kanan atas Xcode 13, lalu setalah itu drag and drop ke Scene Xcode. Caranya bisa dilihat pada gambar-gambar dibawah ini:

Selanjutnya, karena nanti ketika build project harus ada ViewController yang diinisialisasi sebagai tampilan yang akan muncul pertama kali ketika running aplikasi, maka kita tentukan saja bahwa si NavigationController lah yang akan kita set sebagai Initial View.

Caranya, klik NavigationController pada Scene Xcode, pilih Attribut Inspector, lalu checklist pada settingan is Inital View Controller:

Kita akan styling tampilan di NavigationController. Pilih Scene Navigator > pilih NavigationBar > lalu set Large Title. Caranya sebagai berikut:

Change Title#

Ubah Title di NavigationController TableView menjadi seperti ini: (tinggal diikuti langkah 1 dan langkah 2 untuk mengganti Title navigasi):

Tadi yang kita ubah adalah TableView dari NavigationController. Di dalam TableView tersebut, ada yang namanya TableViewCell. Ini nanti akan dijelaskan detail di sesi Bootcamp. Untuk saat ini, si TableViewCell tersebut perlu kita beri nama sebagai identifier, supaya Xcode bisa mengenali Cell tersebut dan nantinya jadi bisa diisi dengan konten / value seperti gambar, teks, dll.

Ikuti step berikut ini, TableViewCell nya kita beri nama ArtworkCell:

ArtworkTableViewController#

Berikutnya kita akan membuat file baru dan kita beri nama ArtworkTableViewController:

Ubah codenya menjadi seperti ini:

Langkah berikutnya, file yang tadi kita buat, perlu untuk kita pasang sebagai Custom Class di TableViewController yang sudah ada (bawaan si NavigationController). Jangan khawatir kalo bingung dengan istilah-istilahnya, kembali pada tujuan awal yaitu bisa mengikuti dan merasakan experience ketika menggunakan Xcode. Silahkan diikuti step dibawah, pada bagian Custom Class, isikan valuenya dengan nama file yang tadi kita buat yaitu ArtworkTableViewController:

Jalankan projectnya dengan cara sebagai berikut. Dan jika berhasil maka akan muncul di Simulator:

Cell Style#

Sama seperti Title pada NavigationBar, kita juga bisa ubah-ubah style pada TableViewCell. Ikuti langkah pada gambar. Ubah nilai row heightnya menjadi 250:

Image View#

Selanjutnya kita tambahkan object ImageView di Object Library ke ArtworkTableViewController. Caranya sebagai berikut:

Kemudian kita styling UIImageView tersebut dengan menggunakan fitur AutoLayout.

Silahkan diikuti poin-poin dibawah. Pilih UIImageView nya > Pilih tombol Constraint > Berikan value sesuai dengan angka yang tertera di gambar dibawah, lalu setelah itu klik tombol Add 4 Constraints:

Dan supaya ada gambaran nanti tampilannya seperti apa, pilih UIImageView > Klik Attribut Inspector, lalu samakan valuenya sesuai contoh berikut:

Adding label#

Selanjutnya kita akan menambahkan dua Text Label dari Object Library, lalu akan kita tempatkan di UIImageView yang sudah kita buat pada step sebelumnya. Cara menambahkan label dari Object Library sama seperti menambahkan Navigation Controller, tinggal drag and drop. Urutan pengerjaannya sebagai berikut:

Pertama, dari objectlibrary pilih Label:

Kedua, tambahkan attribute style pada label:

Ketiga, tambahkan Auto Layout Constraint:

Keempat, buat satu lagi label. Kalau yang pertama tadi untuk AuthorName, sekarang buat untuk Description. AuthorName dan Description kan sudah kita buat di dalam file Artwork.swift. Masih ingat?

Kelima, tambahkan Auto Layout Constraint dengan value sebagai berikut:

Selesai!

ArtworkTableViewCell#

Jika sebelumnya yang kita atur dan konfigurasikan itu adalah ArtworkTableViewController, nah sekarang konten dari ArtworkTableViewController itu yang perlu kita setup. Caranya;

Pertama; buat file baru dan beri nama ArtworkTableViewCell

Kedua, setelah bikin file bernama ArtworkTableViewCell diatas, tentu file tersebut harus dipasangkan dengan View Cell nya yaitu ArtworkCell. Maka dari itu, kembali ke Main Scene lalu lakukan step berikut:

Connecting the code#

Di part ini perlu untuk lebih fokus lagi, karena inilah kunci dari bagaimana tampilan visual yang sudah kita buat, itu bisa berinteraksi dengan file-file code yang sudah kita buat juga.

Di step ini kita akan melakukan hal krusial yaitu mengubungkan antar Code dan Tampilan (View). Perhatikan cara berikut ini lalu ikuti:

Pertama, open code editor side-by-side dengan tampilan ArtworkTableViewController:

Kedua, pada file ArtworkTableViewCell, ketikkan code dibawah ini:

import UIKit
class ArtworkTableViewCell: UITableViewCell {
    @IBOutlet weak var thumbnailImageView:UIImageView!
    @IBOutlet weak var authorNameLabel: UILabel!
    @IBOutlet weak var descLabel: UILabel!
}

Ketiga, ikuti step pada gambar dibawah. Ini adalah cara untuk mengubungkan antara Tampilan dengan Code yang sudah kita buat. Pada sesi Bootcamp nanti akan lebih dijelaskan detail lagi.

Klik & Drag thumbnailImageView ke UIImageView Klik & Drag authorNameLabel ke text Label Author Name Klik & Drag descLabel ke text Label Description

Bagaimana, sudah bisa?

Finishing Touch#

Lengkapi code di file ArtworkTableViewCell menjadi seperti ini hasil akhirnya:

import UIKit
class ArtworkTableViewCell: UITableViewCell {
    @IBOutlet weak var thumbnailImageView:UIImageView!
    @IBOutlet weak var authorNameLabel: UILabel!
    @IBOutlet weak var descLabel: UILabel!
    var artwork: Artwork! {
        didSet {
            updateUI()
        }
    }
    func updateUI() {
        thumbnailImageView.image = UIImage(named: artwork.thumbnailFileName)
        authorNameLabel.text = artwork.authorName
        descLabel.text = artwork.description
    }
}

Kemudian pada file ArtworkTableViewController lengkapi code nya menjadi seperti ini hasil akhirnya:

import UIKit
class ArtworkTableViewController: UITableViewController {
    var artwork: [Artwork] = Artwork.fetchArtwork()
    // MARK: UITableViewDataSource
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return artwork.count
    }
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "ArtworkCell", for: indexPath) as! ArtworkTableViewCell
        let artwork = artwork[indexPath.row]
        cell.artwork = artwork
        return cell
    }
}

Terakhir, pada file Main, pilih ArtworkTableViewController, pilih area dibawah UITableViewCell (seperti contoh di gambar), lalu ubah nilai Row Height nya menjadi 250

Pada Label "Author Name", di kasus saya masih ada AutoLayout yang berwarna merah. Itu artinya nanti tampilannya akan sedikit berantakan. Untuk solusinya, saya tambahkan constraint secara otomatis dengan cara klik tombol "Add Missing Constraint" :

Jalankan aplikasinya dan hasilnya menjadi seperti ini:

MVC Pattern#

Rapihkan file-file yang tadi sudah kita buat dengan cara mengelompokkannya kedalam group Model, View dan Controller atau lebih dikenal dengan MVC Design Pattern. Untuk lebih detailnya lagi, akan kita bahas di sesi Bootcamp nanti.

OKE. Sementara itu dulu. Cukup panjang dan bikin pusing juga ya? Hehehe

Gapapa. Pelan tapi pasti semua akan terasa make senses pada saat Bootcamp nanti.

Sampai bertemu di Bootcamp ⚡️

💡

Ikuti perkembangannya di akun Twitter Hidayat Abisena ⚡️!