Membuat Project Pertama di Xcode dan iOS SDK

Saya asumsikan Anda telah menginstal Xcode 6 dan telah memahami sedikit tentang bahasa pemograman Swift pada postingan sebelumnya. Kita mungkin sering mendengar program “Hello World” di hampir disemua bahasa pemograman atau proses pengembangan aplikasi lainnya. Hello World merupakan program pertama yang dibuat oleh seorang programmer. Ini merupakan program yang sangat simple, karena hanya menampilkan “Hello, World” di layar device atau semilator.

Membuat aplikasi pertama di iOS SDK

iOS Hello WorldSesuai dengan tradisi tersebut, di postingan kali ini kitakan membuat program “Hello World” mengguncakan Xcode. Hal ini bertujuan untuk:

  • Memberikan penjelasan tentang pengenalan syntax dan struktur dari Swift, yang merupakan bahasa pemograman baru di iOS.
  • Ini juga memberikan kita pengenalan dasar tentang environment Xcode 6. Kita akan belajar bagaimana membuat project Xcode dan tampilan layout menggunakan Storyboard.
  • Kita juga belajar bagaimana meng-compile program, membuat aplikasi dan men-tes aplikasi tersebut menggunakan simulator.

 

Aplikasi Pertama di Ios

Aplikasi kita akan memiliki tampilan seperi gambar disamping, sangat simple dan hanya menampilkan tombol Hello World. Ketika user tap tombol, aplikasi akan menampilkan pesannya. Ya seperti itulah, memang sangat mudah, tetapi ini membantu kita untuk mengikuti perjalanan pemograman di iOS.

Membuat Project Baru

Pertama jalankan Xcode, tentunya jika kita telah menginstal Xcode di Mac App Store dan seharusnya sudah ada di Launchpad.

Ketika dijalankan, Xcode akan menampilkan welcome dialog, lalu pilih “Create a new Xcode project” untuk memulai membuat project baru:

Welcome Dialog Xcode

Setelah itu Xcode akan menampilkan beberapa template project, untuk aplikasi pertama ini pilih “Single View Application” lalu klik next.

Xcode Project Template Selection

Lalu nantinya kita akan diarahkan ke windows baru untuk mengisi nama project dan sebagainya seperti gambar dibawah untuk keperluan project ini.

Option for Hello World Project

Tujuan dari form diatas adalah untuk mengisi :

  • Product Name : HelloWorld – Merupakan nama dari aplikasi.
  • Organization Name : AppCoda – Merupakan nama dari organisasi dari project.
  • Organization Identifier : com.appcode – Merupakan nama domain kita, soal ini bisa kita ganti sesuai dengan nama domain yang kita inginkan seperti “edu.self”.
  • Bundle Identifier : com.appcoda.HelloWorld – Merupakan identifier unik dari aplikasi yang nantinya kita gunakan untuk submit aplikasi. Kita tidak perlu mengisi form ini, karena Xcode akan otomatis membuatnya untuk project kita.
  • Language : SwiftXcode 6 mendukung pengembangan menggunakan bahasa pemograman Objective-C dan Swift. Nah untuk tutorial ini, kita hanya akan menggunakan Swift untuk pengembangan aplikasi iOS.
  • Device: iPhone – Memilih “iPhone” untuk device project ini.
  • User Core Data: [jangan di checlist] – Jangan menceklis pilihan ini, karena kita tidak membutuhkan Core Data untuk project simple ini. Kita akan menggunakan Core Data di pembahasan lain.

Klik Next untuk melanjutkan, Xcode akan bertanya dimana kita akan menyimpan project “Hello World”. Pilih folder manapun yang Anda ingikan sebagai lokasi penyimpanan project. Lalu klik continue.

Memilih Folder untuk menyimpan iOS Project

Setelah menerima konfirmasi dari kita, Xcode akan otomatis membuat project “Hello World”. Layar akan menampilkan Xcode seperti gambar dibawah:

Main Xcode Windows for HelloWorld Project
Main Xcode Windows for HelloWorld Project

 

Xcode Workspace

Sebelum kita memulai coding, mari kita pahami terlebih dahulu seluk beluk environment dari Xcode workspace. Disebalah kiri panel Xcode meruapakan project navigator. Kita bisa menemukan semua file project kita di area ini. Di area tengah dari workspace merupakan area editor. Kita bisa melakukan semua kegitan editing di area ini (seperti mengedit project setting, file source code, user interface, dsb). Tergantung tipe filenya, Xcode akan menampilkannya dalam bentuk tampilan berbeda di area editor. Sebagai contoh jika kita memilih file ViewController.swift di project nagivator, Xcode akan menampilkan source code di area tengah. Jika kita memailih “Main.storyboard”, yang berisikan file user interface, Xcode akan menampilkan editor Visual untuk Storyboard, seperti gambar dibawah ini.

Xcode Workspace
Xcode Workspace
Storyboard Editor
Storyboard Editor

Di panel sebelah kanan adalah area utility. Area ini menampilkan properties dari file dan memperbolehkan kita untuk mengakses Quick Help. Jika Xcode tidak menampilkan area ini, kita bisa memilih tombol sebelah kanan pada toolbar untuk meng-enable-kannya.

Di area tengah merupakan view button dari view selector dimana ini berada otomatis dan dipilih secara default. Jika kita mengkliknya, Xcode aka menampilkan area debug. Area debug digunakan untuk menampilkan pesan debug. Kita akan membahas ini lebih lanjut di pembahasan lain, jadi jangan khawatir jika hal ini belum begitu dibahas dipostingan ini.

Area Debug
Area Debug

 

Menjalankan Aplikasi untuk pertama kali

Run Area
Run Area
Simulator
Simulator

Sampai di tahap ini, kita memang belum menulis satu barispun code, tetapi tetap tenang karena kita bisa tahu cara melakukan testing aplikasi menggunakan simulator terlebih dahulu. Hal Ini bertujuan akan kita lebih tau bagaimana mendebug dan testing aplikasi di Xcode. Di toolbar, harusnya ada tombol Run. Jika kita klik tombol Run, maka Xcode akan otomatis mem-build aplikasi dan menjalankannya kedalam simulator.

Defaultnya, simulator yang dijalankan adalah simulator iPhone6. Kita bisa klik tombol iPhone dan kita akan melihat beberapa list simulator yang tersedia yang bisa kita pilih. Untuk demo kali ini, saya menggunakan iPhone 5s. Ketika dipilih, lalu klik tombol Run untuk men-load kemabali aplikasi ke simulator.

Layout putih polos harunsya tampil di layar simulator, karena kita belum mengimplemetasikan apapun di project. Untuk memberhentikannya cukup mudah, hanya dengan menekan tombol “Stop” di toolbar.


 

Mendesign User Interface Menggunakan Storyboard

Nah sekarang kita telah mengetahui ide dasar dari environment Xcode development, tahap selanjutnya adalah mendesign tampilan untuk aplikasi pertama kita. Di project navigator, pilih file “Main.storyboard”. Nantinya Xcode akan membawa kita ke visual editor untuk Storyboards sebagai Interface Builder nya.

Storyboard

Storyboard menyediakan tampilan visual editor bagi developer untuk mendesign User Interface aplikasi. Kita menggunakan storyboard untuk membuat layout dan juga perpindahan antar layout. Nah karena disini kita hanya akan menggunakan template “Single View Application” untuk aplikasi kita, template tersebut telah memilih view controller scene secara otomatis, dimana scene di storyboard merepresentasikan view controller dan tampilannya. Ketika mengembangkan aplikasi iOS, view adalah pondasi dasar untuk membuat user interface aplikasi kita.

Tiap tipe dari view memiliki fungsinya sendiri. Sebagai contoh, view yang kita temukan di storyboard berfungsi sebagai wadah view agar menampung view seperti buttons, labels, images dsb.

View Controller di design untuk mengatur view dan subview. Jika kita bingung dengan hubungan antara view dan view controllers, jangan khawatir. Kita akan mendiskusikan bagaimana view dan view controller bekerja di pembahasan selanjutnya. Nah, untuk saat ini kita fokus belajar bagaimana menggunakan storyboard dan Interface Builder untuk layout dari user interface. Outline view sangat berguna ketika kita ingin memilih object yang ada di storyboard. Jika outline view tidak tampil di layar, gunakan tombol toogle untuk enable/disable outline view.

Disabling Size Classes

Jika Anda pernah mencoba Xcode 5, mungkin Anda heran kenapa ukuran dari view controller di Xcode 6 berbeda dengan versi yang lainnya. View Controller lebih besar dan tidak terlihat seperti iPhone. Nah sekarang teknologi one-size-fits-all canvas diperkenalkan di Xcode 6 yang dinamakan dengan Size Classes.

Disable size classes

Size Clases merupkan class baru yang diperkenalkan di iOS 8. Dengan menggunakan size classes, Xcode 6 memperbolehkan developer menyatukan storyboard untuk membuat UI dari aplikasi agar dapat bekerja di kedua device iPhone dan iPad.

Nah terlebih dahulu yang perlu diketahui, jika kita ingin membuat universal app, agar bisa support pada kedua device iPhone dan iPad, kita harus menggunakan dua storyboard yang berbeda, masing-masing satu untuk satu device.

Ya itulah gambaran tentang size classes, tapi di project ini kita tidak akan menggunakan size classes. Untuk membuatnya project kita tetap mudah, kita akan men-disable size classes. Di file Inspector, uncheck “Use Size Classes” yang ada di bawah dokumen Interface Builder. Jika kamu menemukan kondisi dimana File Inspector ini tidak terlihat, kita bisa menampilkannya dengan klik View>Utilities>Show File Inspector.

Ketika kita men-disable size classes, Xcode akan memberi tahu kita untuk memilih target device dari project ini. Untuk project ini saya menggunakan iPhone dan klik “Disable Size Classes” untuk mengkonfirmasi. Sehingga view controller sekarang akan terlihat seperti iPhone, seperti yang terlihat digambar dibawah ini:

View Controller Update

Menambahkan Tombol ke View

Selanjutnya kita akan menambahakan tombol Hello World ke View. Dibawah area utility, terdapat Object library, disini kita bisa memilih banyak UI Control dan untuk menggunakannya, kita hanya perlu melakukan drag-and-drop ke dalam view. Jika kita tidak melihat Object library, kita bisa klik tombol “Show the Object Library”.

Kita bisa menggunakan tombol toogle untuk mengganti antara list view dan icon view. Ok, selanjutnya kita tambahkan tombol ke view. Yang perlu dilakukan selanjutanya adalah me-drag object Button dari Object Library ke view.

Menambahkan Tombol

Setelah kita men-drag tombol ke dalam view, kita akan melihat garis horizontal dan vertikal, lalu geser hingga tombol benar-benar berada di tengah. Selanjutnya kita beri nama tombol tersebut dengan meng-kliknya dua kali lalu memberi nama “Hello World”.

Jika kita menekan tombol Run di aplikasi ini, kita akan melihat tombol Hello World tampil di simulator. Wah keren ya ?… ahahaah 😀 “tombol tanpa fungsi apa-apa tentunya”. Nah untuk membuatnya lebih keren lagi kita butuh beberapa baris code untuk menampilkan pesan “Hello World” ketika tombol di tekan.


 

Coding Hello World

Nah saya asumsikan kita telah menyelesaikan pembuatan user interface dari aplikasi Hello World, selanjutnya mari kita tulis bebera code. Di Project Navigator, harunya terlihat file ViewController.swift. Nah ketika kita menggunakan template “Single View Application” Xcode secara otomatis membuat class ViewController di dalam file ViewController.swift. Yang kita lakukan selanjutnya adalah menambahkan perintah : “ketika tombol di klik, pesan Hello World akan tampil di aplikasi dalam bentuk code”.

Swift vs Objective-C

Jika Anda pernah menulis code dalam bahasa Objective-C, satu perubahan besar yang terjadi di Swift adalah penggabungan header(.h) nya dan file implementasinya (.m). Dan perlu Anda ketahui, kita tidak perlu repot-repot lagi karena sekarang semua infomasi dari class sekarang sudah ada di file .swift.

Pilih file tersebut dan area editor akan menampilkannya dalam bentuk source code. Saya sarankan untuk mengcopy file dibawah ini. Jika pada class ViewController terlihat seperti ini:

Buar class ViewController tersebut terlihat menjadi seperti source code dibawah ini:

Apa yang berbeda ?

Nah disini kita menambahkan method showMessage() kedalam class ViewController. Yang artinya method showMessage() merupakan sebuah action, dimana ketika action di panggil keseluruhan code akan di proses oleh sistem untuk menginstruksikan iOS agar menampilkan pesan “Hello World” di layar.

Menghubungkan User Interface dengan Code

Keindahan dari sebuah pengembangan aplikasi iOS terletak antara code (file .swift) dengan user interface (storyboard). Tapi bagaimana cara mengubungkan code dengan user interface?

Untuk menjawab pertanyaan ini, kita akan coba menjabarkannya lebih spesifik lagi, menjadi:  Bagaimana kita bisa mengghubungkan tombol “Hello World” di storyboard dengan method showMessage didalam class ViewController ?

Yang kita perlukan adalah membuat sebuah koneksi antara tombol “Hello World” dengan method showMessage(), sehingga aplikasi akan merespon ketika user menekan tombol Hello World.

Pilih “Main.Storyboard” untuk memilih kembali Interface Builder. Tekan dan tahan tombol CTRL di keyboard, klik tombol “Hello World” dan pindahkan itu ke icon View Controller.  Lepaskan kedua tombol (mouse + keyboard) dan kemudian akan muncul pop-up. Pilih “showMessage”, dimana fungsinya untuk membuat koneksi antara tombol dengan dengan pesan yang akan ditampilkan.

Code dengan UI

First AppTest Aplikasi

Nah sekarang kita sudah siap untuk men-tes aplikasi pertama kita. Kita hanya perlu menekan tombol Run. Jika semuanya benar, aplikasi kita akan berjalan lancar di simulator. Dalam kondisi ini aplikasi akan menampilkan pesan Welcome ketika kita menekan tombol Hello World.

 

 


Launch Screen

Ketika aplikasi kita berjalan pertama kali, kita mungkin sadar bahwa muncul sekilar layout bewarna putih sebelum layout Hello World muncul.

Launch Screen

Biasanya sih tampilan yang muncil pertama kali ini menampilkan gambar statis, sebelum tampilan aplikasi utama berjalan. Nah kita bisa menambahkan gambar kedalamnya yang dinamakan dengan Lunc Screen, dimana gambar Lunch screen ini memberikan kesan pertama ketika aplikasi dijalankan pertama kali. Di iOS 8 dan Xcode 6, Apple memperbolehkan developer untuk membuat launch screen menggunakan Interface Builder.

Untuk semua project baru yang dibuat di Xcode 6, untuk menggunakannya kita harus menemukan sebuah file XIB launch screen, yang dikonfigurasikan sebagai file default ketika dijalankan. Sama halnya seperti project Hello World, kita akan menemukan LaunchScreen.xib didalam project navigator. Umumnya layar berisikan nama dari project beserta copyrightnya. Well untuk sementara kita tidak akan membahas lebih lanjut mengenai hal ini, mungkin di pembahas lebih lanjut kita akan membahas bagaimana membuat awesome launch screen di aplikasi iSO. Ya kurang lebih seperti itulah gambar lunch screen.


 

Mengganti Warna Tombol

Ada satu hal lagi yang perlu diketahui sebelum mengakhiri pembahasan kali ini, yaitu betapa mudahnya kita untuk mengganti warna dari sebuah tombol melalui propertiesnya. Pertama klik tombol “Hello World” dan kemudian klik Attributes Inspector dibawah area Utility. Kita akan mendapatkan akses ke properties tombol. Nah disini kita bisa mengganti font, warna teks, warna background, dsb. Coba untuk ganti warna teks menjadi putih dan warna background menjadi orange atau warna apapun yang disuka, seperti gambar dibawah.

Warna Tombol

Well cukup sekian pembahasan kali ini, semoga artikelnya bermanfaat guys!! Keep calm and build apps, see yaa… 😉

Iklan

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s