Tutorial

IOS Programming Tutorial 01: Aplikasi HelloWorld

0 194

Artikel ini sudah di baca 1809 kali!

Sesuai tradisi, untuk mengawali kumpulan tutorial iOS, tutorial pertama merupakan aplikasi HelloWorld.  Aplikasi ini mempunyai tampilan sederhana, berupa sebuah tombol, bila ditap akan memunculkan tulisan Hello World menggunakan sebuah label.

Untuk lebih jelasnya, anda bisa melihat screenshot demo aplikasi Hello World

Tampilan awal aplikasi, sebuah tombol Hello World

Tap tombol Hello World, tulisan Hello World akan muncul

Pada tutorial pertama ini, anda akan mempelajari beberapa hal:

  • Membuat project dengan template Single View Application
  • Menyusun User Interface
  • Mendefinisikan Outlet dan menghubungkannya dengan komponen di User Interface
  • Mendefinisikan Action dan menghubungkannya dengan komponen di User Interface

Langkah 1: Buat project baru dengan Xcode, pilih template Single View Application

Jalankan Xcode, lalu buatlah project baru dengan template Single View Application.  Simpan project di suatu folder (misalnya folder Projects di home directory anda).

Xcode: Create a new Xcode project
Pilih template Single View Application

Xcode menyediakan beberapa template seperti Master-Detail Application, OpenGL Game, Page-Based Application, Single View Application, Tabbed Application, Utility Application dan Empty Application.  Pilihlah template yang sesuai dengan aplikasi yang akan anda buat.  Misalnya anda akan membuat aplikasi game, pilih template OpenGL Game.

Apa keuntungan menggunakan template? Xcode akan langsung menggenerate beberapa file (header, implementation, storyboard, view, dsb) sehingga anda tidak perlu repot membuatnya satu-persatu.

Isikan nama aplikasi (HelloWorld), company identifier. Aktifkan Use Storyboard dan Use Automatic Reference Counting
Simpan aplikasi HelloWorld di suatu folder, misalnya di folder Projects
Xcode akan menggenerate beberapa file, project sudah siap dikerjakan

Ada beberapa file yang digenerate oleh Xcode.  File yang berekstensi .h merupakan file header.  Anda akan mendefinisikan variabel, property, method di file header ini.  Berikutnya adalah file berekstensi .m, yang merupakan file implementation.  Jika anda mendefinisikan sebuah method di header, maka implementasi method tersebut harus anda tuliskan di file .m.

File .storyboard berisi storyboard, di mana anda akan menyusun user interface dan menghubungkan beberapa view (jika aplikasi anda terdiri dari beberapa view).

Pilih file Mainstoryboard.storyboard.  Anda akan mendapatkan sebuah view seperti gambar berikut:

View pada Storyboard

Hanya ada satu view, karena anda memilih template Single View Application, jadi Xcode hanya menggenerate satu view saja.

Langkah 2 : Menyusun User Interface (menambahkan Button dan Label)

Komponen user interface (Cocoa Touch) dapat anda akses di Xcode, sebelah kanan bawah.  Ada banyak komponen, contohnya Label:

Komponen Label

Drag komponen Button ke View.  Kemudian double click button tersebut untuk mengisi tulisan Hello World!, seperti gambar berikut:

Ubah title pada Button

Hasilnya akan seperti ini:

Button dengan title Hello World!

Tambahkan komponen Label dengan cara yang sama.  Ubah ukuran dan tulisan dari label tersebut.  Caranya dengan mengubah property yang dapat diakses di Xcode bagian kanan atas.  Kosongkan bagian text (di awal aplikasi, tulisan Hello World belum muncul).  Kemudian ubah ukuran font menjadi 34 (bagian Font) dan buatlah rata tengah (bagian Alignment).

Kosongkan bagian Text, ubah ukuran huruf menjadi 34, lalu set rata tengah

Langkah 3: Mendefinisikan Outlet dan Action

Secara sederhana, Outlet, atau IBOutlet adalah penghubung dari code program ke komponen pada user interface.  Pada aplikasi ini kita akan mengubah tulisan pada label menjadi HelloWorld pada saat button di tap.

Untuk mengubah tulisan pada label, kita perlu mendefinisikan sebuah IBOutlet yang bertipe label, supaya kita dapat mengubah tulisannya menggunakan kode program.

Perubahan tulisan pada label akan terjadi saat button Hello World! di tap.  Kita perlu mendefinisikan sebuah IBAction berupa method, yang akan dipanggil saat button tersebut di tap.

Untuk mendefinisikannya, buka file ViewController.h, dan tambahkan beberapa baris kode sehingga menjadi seperti ini:

File ViewController.h, berisi deklarasi IBOutlet dan IBAction yang akan digunakan

Kemudian buka file ViewController.m, lalu ubahlah isinya sehingga menjadi seperti ini:

File ViewController.m berisi implementasi

Langkah 4: Menghubungkan User Interface dengan Code

Pada langkah 2 kita sudah menyusun User Interface, kemudian dilanjutkan dengan langkah 3 dengan menuliskan kode.  Langkah terakhir yang harus dilakukan adalah menghubungkan user interface dengan kode program.

Yang pertama adalah menghubungkan button Hello World! dengan method showHelloWorld.  Caranya mudah, buka file Mainstoryboard.storyboard.  Pilih button, lalu sambil menahan tombol Ctrl, drag ke arah bulatan kuning (yang melambangkan Controller) di bawah.  Akan muncul pilihan showHelloWorld.  Klik pada pilihan tersebut.  Sekarang button HelloWorld sudah terhubung dengan method showHelloWorld

Ctrl+Drag dari button ke bulatan kuning (Controller)
Pilih showHelloWorld

Selamat, anda baru saja menghubungkan sebuah action ke sebuah komponen.  Berikutnya adalah menghubungkan outlet.  Caranya mirip, hanya arahnya berbeda.

Klik bulatan kuning, lalu sambil menahan tombol Ctrl, drag ke arah label, seperti gambar berikut:

Menghubungkan Outlet

Langkah 5: Jalankan aplikasi HelloWorld

Klik tombol Run (pojok kiri atas) untuk mencoba menjalankan aplikasi HelloWorld.

Jalankan aplikasi anda

Latihan

Tambahkan dua button lagi untuk menampilkan tulisan “iOS programming is Fun” dan “I Want to learn more”.

Tampilan saat button iOS Programming is Fun ditap
Tampilan saat button I want to learn more ditap 

Sumber : http://blog.yuanlukito.com/2012/07/tutorial-01-aplikasi-helloworld/

FacebooktwitterlinkedinmailFacebooktwitterlinkedinmail

About the author / 

Onno Praditya

Related Posts

Leave a reply

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

*

POPULAR The most recent

  • Mac

    Cara Potong Video di Mac mengunakan Quick Time Player

    Artikel ini sudah di baca 38311 kali!Ekosistem Mac menyediakan QuickTime Player sebagai aplikasi default untuk menyaksikan video. Pengguna dapat menonton video dengan dua cara, melalui preview dengan hanya klik tombol spasi atau dengan double click untuk membuka video di QuickTime Player. Dikembangkan secara khusus oleh Apple, tahukah kamu bahwa QuickTime Player memiliki beragam fungsi tambahan? Bahkan, QuickTime Player dapat memotong…

  • Cara Membersihkan History dan Cache Pada Safari macOS

    Artikel ini sudah di baca 42663 kali!Berikut adalah cara untuk membersihkan riwayat (history) pada safari macOS : Buka Safari Di bar menu pilih History Pada daftar paling bawah, pilih Clear History Kamu dapat memilih rentang waktu riwayat yang ingin kamu hapus. Jika sudah memilih rentang waktu, klik Clear History Begini cara untuk membersihkan cache: Pada menu bar, pilih Preferences Di sisi kanan atas pilih…

LATEST COMMENTS

Digital Ads

GET IN TOUCH

Yuk Buruan Follow akun dibawah berikut ini agar mendapatkan informasi yang lebih cepat dari Onno Sites

Stay up-to date with the latest news and other stuffs, Sign Up today!