Categories
Dokumentasi

(Sama-sama) Belajar Swift (Xcode)

basit.adhi.prabowo
basit.adhi.prabowo

Pada kesempatan kali ini, kita akan (sama-sama) belajar mengenai Swift (Xcode 10.1) pada Mac High Sierra. Berikut adalah perjalanan saya dari nol sampai bisa membuat aplikasi presensi Mahasiswa, dengan bahasa dan pemahaman saya sendiri.

Kebutuhan

  1. Notebook/laptop Mac
  2. iPhone (UDID)
  3. Apple ID

Persiapan

  1. Buka Xcode
  2. Buat proyek baru
  3. Isi nama produk, nama organisasi, identifier perusahaan (bisa kebalikan dari domain, misal: acid.unisayogya, kebalikan dari unisayogya.ac.id), dan alat iPhone. Klik tombol lanjutkan
  4. Pilih Single View Application. Klik tombol lanjutkan

Dasar

1. Editor

editor
editor
  1. Library adalah wadah yang berisi objek-objek yang berguna di dalam desain, seperti textbox, label dan sebagainya
  2. Standard Editor adalah editor yang memuat pekerjaan utama, misalnya menampilkan desain
  3. Assistant Editor adalah editor yang memuat pekerjaan sekunder, misalnya menampilkan kode dari desain
  4. Navigator adalah bagian yang berisi link-link navigasi
  5. Debug area adalah bagian yang menampilkan catatan eksekusi
  6. Inspectors adalah bagian yang menampilkan atribut-atribut

2. Menambahkan Aset

asset
asset
  1. Pilih Assets.xcassets pada navigasi proyek
  2. Bisa upload langsung atau buat folder dulu
  3. Klik kanan, pilih import…
  4. Pilih berkasnya, kemudian klik tombol buka

3. Menggunakan Aset

menggunakan asset pada imageview
menggunakan asset pada imageview
  1. Pilih Main.storyboard pada navigasi proyek
  2. Pada Image View > Inspectors > Attributes Inspectors > Image, pilih gambar yang sudah ditambahkan pada aset

4. Menggabungkan objek ke dalam view

embed
embed
  1. Pilih Main.storyboard pada navigasi proyek
  2. Pilih beberapa objek yang akan digabungkan ke dalam view, klik Embed in, pilih View

5. Constraints (auto layout)

Auto Layout secara dinamis akan menghitung/menyesuaikan ukuran dan posisi semua view pada semua objek di View sesuai dengan pengaturan. Pengaturan ini akan berfungsi jika aplikasi dibuka pada layar yang berbeda-beda, misalnya: jika memilih align center vertical, maka objek akan selalu di tengah secara vertikal.

contoh fungsi constraints
contoh fungsi constraints

 

constraints
constraints
  1. Pilih Main.storyboard pada navigasi proyek
  2. Pilih objek atau view yang akan diatur constraints-nya
  3. Pilih align constraints (posisi), constraints (ukuran), atau otomatis

6. Connection

Connection adalah hubungan antara desain dengan baris kode, bisa berupa outlet atau action.

– Action

  1. Pilih Main.storyboard pada navigasi proyek
  2. Klik pada objek di Standard Editor, tekan tombol command mac, kemudian drag n drop ke baris kode, pilih action

    connect action
    connect action
  3. Beri nama, kemudian klik tombol Connect

    connect action nama
    connect action nama

– Outlet

  1. Pilih Main.storyboard pada navigasi proyek
  2. Klik pada objek di Standard Editor, tekan tombol command mac, kemudian drag n drop ke baris kode, pilih outlet

    connect outlet
    connect outlet
  3. Beri nama, kemudian klik tombol Connect

    connect outlet nama
    connect outlet nama

7. View Baru

view baru
view baru
  1. Pilih Main.storyboard pada navigasi proyek
  2. Klik tombol Library
  3. Pada daftar objek, pilih View Controller, kemudian posisikan di Main.Storyboard
  4. Klik kanan pada Navigator > navigasi proyek, pilih New file…, pilih Cocoa Touch Class, beri nama
  5. Pilih View Controller yang baru saja dibuat tadi
  6. Pada Inspectors > Identity Inspectors > Class isi dengan kelas kode baris (cocoa touch class) yang baru saja dibuat tadi

    view kode
    view kode

8. Segue

Segue mendefinisikan transisi antara dua View, misalnya diklik tombol presensi kemudian bisa membuka halaman setting. Segue secara bawaan (default) bersifat otomatis dieksekusi, misalnya tombol presensi disentuh, maka langsung membuka halaman setting. Namun, dapat dibuat tidak otomatis dieksekusi, misalnya tombol presensi disentuh, maka membuka halaman setting jika belum ada setting, tetapi tidak membuka halaman setting jika sudah ada setting.

segue
segue
  1. Pilih Main.storyboard pada navigasi proyek
  2. Klik pada View Controller asal di Standard Editor, tekan tombol command mac, kemudian drag n drop ke baris View Controller Tujuan
  3. Pada Inspectors > Attributes Inspectors> Identifier isi dengan nama yang dikehendaki, misalnya: bukaSetting, yang nanti bisa dipanggil dengan perintah performSegue()

Gunakan baris kode di bawah ini untuk membuat segue pasti berjalan secara manual:

//performsegue dilakukan manual, override ke false
override func shouldPerformSegue(withIdentifier identifier: String, sender: Any?) -> Bool {
return false
}

func jalankanSegue() {
performSegue(withIdentifier: “bukaSetting”, sender: self)
}

Gunakan baris kode di bawah ini untuk membuat segue berjalan secara semi otomatis:

var isperformsegue:Bool = false

//performsegue dilakukan semi otomatis, tergantung nilai isperformsegue
override func shouldPerformSegue(withIdentifier identifier: String, sender: Any?) -> Bool {
return isperformsegue
}

Lihat juga: Belajar Koding Swift

By basit

Biro Pengembangan Teknologi Dan Sistem Informasi

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.