iOS dari awal dengan Swift: pertama Anda menciptakan iOS aplikasi

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Meskipun kita telah belajar cukup sedikit dalam seri ini pada iOS pengembangan, aku yakin Anda bersemangat untuk mulai membangun aplikasi iOS yang melakukan sesuatu yang keren atau berguna. Dalam tutorial ini, keinginan Anda diberikan. Menggunakan Xcode, Anda akan membuat sebuah proyek iOS dari awal, memodifikasi kode sumber proyek, dan menjalankan aplikasi dalam simulator atau perangkat fisik.

Memperkenalkan Colorific

Colorific adalah nama aplikasi yang Anda membangun. Ide di balik Colorific sederhana, setiap kali pengguna menyentuh layar perangkat, warna perubahan layar. Meskipun konsep dasar, Colorific sempurna untuk mendapatkan dimulai dan menjelajahi seluk-beluk pengembangan iOS.

1. membuat proyek Xcode baru

Seperti yang kita lihat sebelumnya dalam seri ini, setiap aplikasi iOS berjalan melalui hidup sebagai proyek Xcode. Apa itu proyek Xcode? Sebuah proyek Xcode adalah wadah atau repositori yang berisi file, aset, dan informasi yang diperlukan untuk membangun satu atau lebih produk.

Catatan bahwa ini tidak terbatas pada sebuah proyek kode sumber dan aset, seperti gambar dan media lainnya. Proyek juga terus melacak hubungan antara berbagai elemen dan tahu bagaimana membangun produk akhir dari unsur-unsur.

Api up Xcode dan menciptakan proyek Xcode baru dengan memilih New > proyek... dari Berkas menu. Anda dapat mencapai sama dengan menekan Shift + Command + N.

Jika jendela Selamat datang di Xcode muncul ketika Anda meluncurkan Xcode, maka saya sarankan Anda menutupnya sehingga Anda belajar bagaimana untuk membuat sebuah proyek baru yang menggunakan Xcode di menu.

2. Pilih Template aplikasi yang

Mulai dengan aplikasi baru atau proyek itu mudah di Xcode berkat aplikasi template yang disertakan. Untuk setiap permohonan bahwa kami akan membuat, kita perlu satu aplikasi Lihat template. Merasa bebas untuk Lihatlah template aplikasi lain, tetapi pastikan untuk memilih template aplikasi pemandangan tunggal untuk Colorific.

3. mengkonfigurasi proyek

Setelah memilih template aplikasi pemandangan tunggal dan mengklik tombol Next, Xcode menyajikan Anda dengan daftar pilihan untuk mengkonfigurasi proyek baru Anda. Mari kita lihat pada berbagai pilihan.

Nama Produk: Nama produk akan menjadi nama aplikasi Anda. Saya telah bernama aplikasi saya Colorific, tetapi merasa bebas untuk nama aplikasi apapun yang Anda suka.
Nama organisasi: Nama organisasi dapat nama Anda sendiri atau nama perusahaan Anda. Xcode menggunakan nama organisasi untuk berbagai keperluan, seperti menambahkan pemberitahuan hak cipta untuk masing-masing file sumber.
Pengidentifikasi organisasi: Organisasi pengenal adalah tali yang unik yang Xcode menggunakan (bersama dengan nama produk) untuk membuat aplikasi bundle pengenal. Apple merekomendasikan mengadopsi nama reverse domain notasi untuk menghindari penamaan tabrakan. Perhatikan bahwa domain yang Anda gunakan memiliki tanpa ikatan DNS (Domain Name System). Sebagai contoh, perusahaan saya bernama kode pengecoran BVBA dan terletak di Belgia, yang berarti bahwa pengenal perusahaan saya adalah be.codefoundry. Namun, saya juga bisa menggunakan pengecoran be.code atau com.codefoundry. Untuk tutorial ini, saya telah membuat pengenal perusahaan untuk com.tutsplus.
Bundel Identifier: meskipun Anda tidak dapat menetapkan pengenal bundel ketika membuat proyek Xcode baru, Anda bisa mengubahnya setelah Anda membuat proyek Anda. Secara default, bundel pengenal adalah kombinasi pengidentifikasi organisasi dan nama produk. Perlu diingat bahwa spasi pada nama produk diganti dengan tanda hubung di pengenal bundel, karena pengenal bundel tidak boleh berisi spasi.
Bahasa: Versi Xcode mendukung tujuan-C dan Swift. Seri ini berfokus pada pengembangan iOS menggunakan Swift 2.1 sehingga pilihan saya diambil untuk proyek ini.
Perangkat: Dalam versi Xcode (7 pada saat menulis), perangkat menu tarik-turun berisi tiga pilihan, Universal, iPhone dan iPad. Opsi konfigurasi ini memberitahu Xcode perangkat mana target proyek Anda. Dengan memilih opsi pertama, Universal, proyek Anda menargetkan iPad dan iPhone perangkat keluarga. IPod Touch adalah anggota dari keluarga perangkat iPhone seperti yang Anda duga.
Penggunaan Data inti: Jika Anda mencentang kotak ini, Xcode akan membuat beberapa file-file tambahan dan menambahkan beberapa kode boilerplate untuk membantu Anda memulai dengan inti Data, kerangka ketekunan Apple OS X dan iOS. Karena Data inti bukan topik untuk pemula, kita akan meninggalkan kotak ini dicentang.
Termasuk Unit Test: Pengujian adalah aspek penting dari pengembangan perangkat lunak. Xcode memiliki built-in mendukung untuk unit testing. Untuk menjaga hal-hal sederhana, namun, kami akan mengabaikan pilihan ini untuk saat ini.
Termasuk tes UI: Xcode 7 adalah versi pertama dari Apple's IDE yang memiliki built-in mendukung untuk pengguna antarmuka pengujian. Ini adalah masalah besar bagi pengembang OS X dan iOS. Pengguna antarmuka pengujian adalah di luar lingkup dari seri ini, meskipun.

Sekarang Anda harus memiliki pemahaman yang baik tentang opsi konfigurasi yang berbeda ketika mengatur proyek Xcode baru. Untuk proyek ini, saya menyarankan agar Anda menggunakan opsi seperti yang ditunjukkan pada gambar di atas. Perhatikan bahwa pilihan paling mudah dapat diubah setelah Anda membuat proyek Anda. Klik Next bila Anda selesai mengkonfigurasi proyek Anda.

4. Simpan Project

Pada langkah berikutnya, Xcode meminta Anda dimana Anda ingin menyimpan proyek Anda baru. Anda mungkin telah memperhatikan checkbox kecil di bagian bawah jendela untuk berlabel repositori membuat Git pada Mac saya. Teks abu-abu di bawah kotak centang membaca Xcode akan menempatkan proyek Anda dibawah kontrol versi.

Seperti yang saya sebutkan sebelumnya dalam seri ini, kontrol sumber sangat diperlukan dalam pengembangan perangkat lunak. Seri ini tidak akan menutupi topik ini secara rinci, tetapi jika Anda serius tentang pengembangan perangkat lunak, maka saya sangat menyarankan membaca di kontrol sumber.

Git adalah sistem SCM (sumber kode Management) yang paling populer di masyarakat kakao. Namun, itu sangat mungkin untuk menggunakan sistem SCM yang berbeda, seperti SVN atau Mercurial.

Memberitahu Xcode mana Anda ingin menyimpan proyek Anda, centang kotak untuk mengotorisasi Xcode untuk menciptakan sebuah repositori Git untuk proyek dan klik buat di bagian bawah dialog.

5. menjelajahi Xcode antarmuka pengguna

Sebelum kita melanjutkan, saya ingin mengambil beberapa menit untuk menjelajahi Xcode di antarmuka pengguna. Ada empat bidang berbeda:

toolbar di bagian atas
sidebar di sebelah kiri
pemandangan utama di pusat
sidebar di sebelah kanan

Toolbar

Toolbar di bagian atas berisi tombol dan menu yang Anda akan menemukan diri menggunakan paling sering. Seperti yang kita lihat sebelumnya dalam seri ini, tombol untuk menjalankan dan menghentikan aplikasi juga tinggal di toolbar.

Tampilan di pusat toolbar ini mirip dengan tampilan yang Anda temukan di iTunes. Ini akan menampilkan informasi tentang proyek Anda negara atau apa Xcode saat ini lakukan di latar belakang. Ini akan memberitahu Anda, misalnya, ketika membangun berhasil atau gagal.

Kontrol tersegmentasi dua di sebelah kanan dari toolbar dapat digunakan untuk menyesuaikan antarmuka pengguna Xcode's. Bermain-main dengan kontrol berbagai untuk mengetahui bagaimana masing-masing perubahan antarmuka pengguna Xcode.

Navigator

Tujuan utama dari sidebar kiri untuk navigasi dan ini sering disebut sebagai Xcode's navigator.

Navigator memiliki tab yang berbeda dengan proyek Navigator di bagian paling kiri. Pemilihan di sidebar kiri menentukan apa yang ditampilkan dalam tampilan utama Xcode's, ruang kerja.

Tampilan utama atau ruang kerja

Tampilan utama atau workspace adalah area dimana Anda akan menghabiskan sebagian besar waktu Anda. Itu adalah pekerja keras Xcode's dan menampilkan apapun dipilih dalam navigator.

Exploring the Xcode User Interface Main View or Workspace

Inspektur

Sementara sidebar kiri kontrol apa yang ditampilkan dalam tampilan utama Xcode's, isi dari sidebar kanan mencerminkan apa yang sedang ditampilkan atau dipilih dalam tampilan utama.

Exploring the Xcode User Interface Inspector

Sidebar kanan, juga dikenal sebagai Inspektur, menyesuaikan sendiri untuk apa pun pengguna memilih di tampilan utama.

6. menjelajahi proyek

Sudah waktunya untuk mengambil melihat proyek itu sendiri. Proyek isi ditampilkan dalam proyek Navigator, tab pertama di sidebar kiri. Pilih item pertama dalam proyek Navigator untuk melihat rincian proyek di tampilan utama.

Tampilan utama terdiri dari dua bagian, sidebar di sebelah kiri dan tampilan detail di sebelah kanan. Di sidebar, Anda melihat dua item, proyek Anda dengan salah satu item dan target dengan salah satu item.

Ada baiknya untuk mengetahui awal pada apa perbedaan antara sebuah proyek dan target. Ingat bahwa sebuah proyek repositori untuk file, aset, dan data yang diperlukan untuk membangun satu atau lebih produk. Target merujuk kepada salah satu produk. Target berisi petunjuk yang diperlukan untuk membangun suatu produk dengan proyek sumber daya. Ini berarti bahwa proyek dapat berisi beberapa sasaran untuk membangun beberapa produk. Seperti yang Anda lihat, sebuah proyek Xcode adalah lebih dari sekedar folder dengan sekelompok file di dalamnya.

7. membangun & menjalankan: Mengambil 1

Sebelum kita mulai memodifikasi kode sumber proyek, mungkin menarik untuk membangun dan menjalankan proyek Anda baru untuk melihat apa template aplikasi berikan gratis. Klik menjalankan tombol di kiri atas dan pastikan bahwa skema aktif dikonfigurasi untuk menjalankan aplikasi dalam simulator dengan memilih iPhone 6 atau simulator lain untuk iPhone.

Jika semua berjalan baik, simulator harus memulai aplikasi Anda dan menampilkan pemandangan akrab status bar kosong, putih di bagian atas.

8. mengubah antarmuka pengguna

Mari kita mendapatkan tangan kami kotor dan memodifikasi aplikasi antarmuka pengguna. Buka proyek Navigator dan pilih file bernama Main.storyboard. File dengan ekstensi .storyboard adalah file antarmuka pengguna. Dalam file ini, kami menciptakan antarmuka pengguna aplikasi.

Exploring the Main Storyboard of the Project

Storyboard berisi salah satu item, kontroler pemandangan pemandangan putih yang Anda lihat dalam simulator beberapa saat yang lalu. Ruang kerja terdiri dari sebuah sidebar yang menampilkan representasi objek adegan storyboard. Bagian terbesar dari ruang kerja mengandung adegan atau antarmuka pengguna aplikasi.

Pilih objek bernama lihat dalam adegan Controller lihat di sidebar kiri dan melihat bagaimana kerja dan sidebar kanan memperbarui isinya. Sekelompok tab muncul di bagian atas sidebar kanan. Setiap tab berisi kumpulan atribut yang berhubungan dengan obyek yang bernama View.

Exploring the View of the View Controller

Bagian bawah sidebar kanan berisi bagian dengan empat buah tab. Tab ketiga ini diwakili oleh gambar kotak tiga dimensi. Kotak ini adalah bagaimana objek yang umumnya ditampilkan dalam Xcode.

Pilih tab dengan ikon kotak dan gulir melalui daftar yang muncul. Daftar disebut sebagai perpustakaan objek dan berisi berbagai elemen antarmuka pengguna, seperti tombol, Slider, dan switch.

Pada awal tutorial ini, saya bilang kita akan menciptakan sebuah aplikasi fungsional. Pengguna harus mampu menyentuh layar untuk mengubah warnanya.

Ada beberapa pendekatan untuk mendeteksi sentuhan dalam aplikasi iOS. Salah satu solusinya adalah dengan menggunakan tombol. Di Perpustakaan objek, menemukan item yang bernama tombol dan tarik dari perpustakaan objek ke tampilan putih di Xcode di ruang kerja.

Pengguna harus mampu menyentuh bagian manapun dari layar, yang berarti tombol harus mencakup seluruh layar. Pernahkah Anda memperhatikan enam, kotak kecil di tepi tombol? Dengan memindahkan kotak kecil, Anda dapat mengubah tombol dimensi. Menyesuaikan ukuran tombol untuk membuatnya menutupi seluruh layar. Jangan khawatir tentang status bar di bagian atas layar.

Pemandangan di belakang tombol adalah pandangan yang akan berubah warna bila pengguna menyentuh layar. Saat ini, tombol yang menghalangi pandangan dari pandangan pengguna sehingga kita perlu mengubah tombol atribut.

Anda mungkin telah memperhatikan bahwa tombol telah ditambahkan ke daftar benda-benda di sidebar kiri, di bawah objek bernama View. Pilih tombol dari daftar objek dan pilih Inspektur atribut di sidebar kanan — tab keempat dari kiri. Kita hanya perlu membuat penyesuaian dua.

Mulai dengan mengubah jenis tombol dari sistem untuk kustom. Ini akan membuat tombol transparan.

Kita perlu membuat perubahan kedua adalah memerintahkan pengguna apa yang harus dilakukan dengan mengubah judul tombol. Bidang teks di samping label judul saat ini dibaca tombol. Mengubahnya ke keran mengganti warna dan mengatur warna teks hitam untuk membuatnya lebih mudah dibaca.

Change the Title and Text Color of the Button

9. menambahkan tindakan untuk View Controller

Jika Anda akrab dengan pola MVC (Model-View-Controller), maka Anda memiliki kepala mulai iOS pengembangan pembelajaran. Pola MVC adalah pola yang ditemukan dalam banyak bahasa dan kerangka kerja, seperti Laravel dan Ruby on Rails.

Tampilan di antarmuka pengguna kami jatuh dalam kategori V pola MVC. Pandangan ini dikendalikan oleh controller. Lihatlah nama file di proyek navigasi di sebelah kiri. ViewController.swift mewakili pandangan controller yang mengontrol tampilan di antarmuka pengguna kami.

Apa yang dilakukan dengan tampilan controller? Lihat controller dapat melakukan apa pun yang Anda inginkan, tapi itu di tempat pertama bertanggung jawab dalam menangani segala sesuatu yang terjadi dalam pandangan bahwa itu berhasil. Ini termasuk, misalnya, sentuhan dari pengguna. Jika pengguna mengetuk tombol di tampilan, itu tanggung jawab pengontrol tampilan untuk menangani acara sentuh.

Bagaimana kita menangani acara sentuhan? Dalam kasus tombol kami, kami menambahkan tindakan untuk lihat controller. Suatu tindakan adalah nama yang bagus untuk suatu metode. Apa itu metode? Metode adalah fungsi Swift. Tunggu. Apa? Jangan khawatir tentang terminologi terlalu banyak saat ini. Dua posting akan mencakup bahasa pemrograman Swift secara lebih rinci. Apa yang harus Anda ingat adalah bahwa metode seperti metode di Ruby dan PHP, atau fungsi dalam JavaScript.

Jika Anda memanggil metode kontroler Lihat, itu sesuatu dalam respon. Dengan kata lain, jika pengguna menyentuh tombol dan kami menghubungkan metode untuk peristiwa sentuhan, lihat controller akan melakukan sesuatu dalam menanggapi sentuhan acara.

Untuk menambahkan tindakan untuk lihat controller yang mengelola tampilan di antarmuka pengguna aplikasi, kita perlu membuat beberapa perubahan ke file bernama ViewController.swift. Kita hanya perlu menambahkan beberapa baris kode untuk ViewController.swift. Lihatlah bagaimana saya memodifikasi file dari isinya.

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    @IBAction func changeColor(sender: UIButton) {
        
    }

}

Meskipun kita tidak akan fokus pada sintaks dalam tutorial ini, itu cukup mudah untuk memahami apa yang sedang terjadi. Nama tindakan atau metode changeColor(_:) dan memiliki satu parameter, pengirim. Jenis parameter adalah UIButton. Apakah UIButton? Belalang kesabaran.

10. melaksanakan tindakan

Kami telah menambahkan tindakan untuk lihat controller, tetapi tindakan tidak berbuat banyak. Tindakan tidak memiliki tubuh atau pelaksanaan belum. Untuk menerapkan tindakan changeColor(_:), kita perlu menambahkan satu atau lebih pernyataan antara kurung kurawal seperti yang ditunjukkan dalam potongan kode di bawah ini. Aku tidak akan menjelaskan setiap baris kode secara detail, tapi aku akan memberimu inti dari apa yang terjadi.

@IBAction func changeColor(sender: UIButton) {
    // Generate Random Numbers
    let r = CGFloat(arc4random() % 255)
    let g = CGFloat(arc4random() % 255)
    let b = CGFloat(arc4random() % 255)
    
    // Create Color
    let color = UIColor(red: (r/255.0), green: (g/255.0), blue: (b/255.0), alpha: 1.0)
    
    // Update View
    view.backgroundColor = color
}

Seperti Anda ketahui, mungkin untuk memecah warna ke dalam tiga warna primer, merah, hijau, dan biru. Dalam tindakan kami, kami menghasilkan tiga angka acak antara 0 dan 255, dan menggunakan angka-angka ini untuk menciptakan warna yang acak.

Metode yang kami gunakan untuk menciptakan warna sangat deskriptif, init(red:green:blue:alpha:). Dengan baris terakhir dari tindakan kita, kita mengatur warna latar belakang tampilan di antarmuka pengguna kami untuk warna ini baru, dihasilkan secara acak.

Komentar penting ketika menulis kode. Apakah Anda melihat komentar saya menambahkan pelaksanaan changeColor(_:)? Satu baris komentar mulai dengan dua garis miring maju, / /, sedangkan multiline komentar mulai dengan / * dan berakhir dengan * /.

11. menghubungkan tindakan

Metode ini dilaksanakan, tetapi tidak ada yang spektakuler akan terjadi jika kita membangun dan menjalankan aplikasi. Mencobanya jika Anda tidak percaya padaku.

Apa yang hilang adalah hubungan antara tombol dan aksi controller pemandangan. Bagaimana harus lihat controller tahu bahwa tindakan changeColor(_:) perlu menjadi dipicu ketika tombol disadap?

Membuat koneksi ini sederhana. Buka storyboard dengan memilih Main.storyboard dan pilih View Controller obyek dalam adegan Controller View.

Dengan objek View Controller yang dipilih, membuka koneksi Inspektur di sidebar kanan — tab pertama dari kanan. Jika Anda telah mengikuti langkah-langkah dengan benar, Anda harus melihat tindakan yang kita buat di bagian Actions diterima.

Anda akan melihat lingkaran kosong di sebelah kanan dari tindakan changeColor(_:). Klik dan tarik dari lingkaran untuk tombol di tampilan Lihat controller.

Menu yang muncul ketika Anda melepaskan mouse. Menu berisi daftar jenis acara sentuhan. Acara sentuhan yang kami tertarik dinamai Touch Up di dalam. Acara ini dipicu ketika pengguna menyentuh tombol dan mengangkat jarinya. Ini adalah perilaku yang paling umum untuk tombol.

Setelah menghubungkan tombol dan tindakan, Anda akan melihat bahwa sidebar kanan mencerminkan hubungan yang baru saja Anda buat. Hebat. Anda telah berhasil menyelesaikan aplikasi nyata pertama.

Connections Inspector Reflects the Connection

12. membangun & menjalankan: Mengambil 2

Membangun dan menjalankan aplikasi Anda di simulator dan mulai mengetuk-ngetuk layar simulator. Setiap kali Anda tekan layar, warna harus mengubah warna baru, acak. Bagaimana keren adalah bahwa?

Kesimpulan

Kita telah membahas banyak tanah dalam tutorial ini. Meskipun posting ini cukup panjang, kita tidak benar-benar melakukan banyak. Jika Anda tahu teori, Anda dapat membuat Colorific kurang dari lima menit. Jika Anda berlari ke dalam masalah selama tutorial ini, maka pastikan untuk men-download file sumber dari GitHub.

Dalam dua angsuran, kita akan membahas dasar-dasar bahasa pemrograman yang cepat. Hal ini akan mempersiapkan Anda untuk hal-hal menarik dalam sisa seri.

Jika Anda memiliki pertanyaan atau komentar, Anda dapat meninggalkan mereka di komentar di bawah atau mengulurkan tangan kepada saya di Twitter.