Hello World

Sesuai tradisi, untuk mengawali  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 aplikasi tombol hello world!  setelah anda klik tombol maka akan menampilkan tampilan di bawah ini:

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


Tutorial 01: Aplikasi HelloWorld

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:

Image 2(2)

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

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

Image 3(2)

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.

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

One Response

Leave a Reply

You must be logged in to post a comment.