Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Development
Code

Menciptakan Your First iOS aplikasi

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Learn iOS SDK Development From Scratch.
How to Test Your App on an iOS Device
Learning C: A Primer

Indonesian (Bahasa Indonesia) translation by fodal fadel (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 menciptakan sebuah proyek iOS dari awal, memodifikasi kode sumber proyek, dan menjalankan aplikasi iOS Simulator atau perangkat fisik.


Colorific

Colorific adalah nama aplikasi yang kita sedang 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. Pilihan alternatif adalah menekan Shift + Command + N.

Dalam kasus Xcode's Selamat datang jendela muncul ketika Anda meluncurkan Xcode, saya sarankan untuk 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 template aplikasi yang datang dengan itu. 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 yang memungkinkan Anda 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 apa pun yang Anda ingin.
  • 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.
  • Perusahaan Identifier: Pengenal perusahaan adalah tali yang unik, yang Xcode menggunakan (bersama dengan nama produk) untuk membuat aplikasi bundle pengenal. Apple merekomendasikan mengadopsi konvensi penamaan domain-terbalik dalam upaya untuk membuat ini unik. Perhatikan bahwa domain yang Anda gunakan memiliki dasi ada sistem DNS atau nama domain Internet. Sebagai contoh, perusahaan saya bernama kode pengecoran 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 pengenal perusahaan dan nama produk. Perlu diingat bahwa spasi pada nama produk diganti dengan tanda hubung di pengenal bundel, karena pengenal bundel tidak boleh berisi spasi.
  • Awalan kelas: Ketika membuat kelas kustom dalam proyek Anda, sangat penting bahwa nama kelas tidak berbenturan dengan nama kelas yang ada. Dengan menentukan kelas awalan, Xcode akan awalan kelas baru dengan awalan custom kelas ini untuk memastikan bahwa penamaan tumbukan dihindari. Pendekatan yang biasa adalah dengan menggunakan inisial Anda, BJ dalam kasus saya, atau kombinasi yang merujuk kepada perusahaan atau organisasi, seperti sdt Tuts +.
  • Perangkat: Dalam versi Xcode (5.1 pada saat menulis), perangkat menu tarik-turun berisi tiga pilihan, iPad, iPhone, dan Universal. Opsi konfigurasi ini memberitahu Xcode perangkat mana target proyek Anda. Dengan memilih pilihan terakhir, Universal, proyek Anda menargetkan kelompok perangkat iPad dan iPhone. IPod Touch adalah anggota dari keluarga perangkat iPhone seperti yang Anda duga.

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 berikutnya tombol ketika Anda selesai mengkonfigurasi proyek Anda.


4. Simpan Project

Pada langkah berikutnya, Xcode bertanya di mana Anda ingin menyimpan proyek Anda baru. Anda mungkin telah memperhatikan checkbox kecil di bagian bawah jendela untuk berlabel membuat repositori 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 tombol Buat.


5. menjelajahi Xcode antarmuka pengguna

Sebelum kita melanjutkan, saya ingin mengambil beberapa menit untuk menjelajahi Xcode di antarmuka pengguna. Anda dapat melihat 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 sering. Seperti yang kita lihat sebelumnya dalam seri ini, tombol untuk menjalankan dan menghentikan aplikasi tinggal di toolbar.

Tampilan di pusat toolbar ini mirip dengan tampilan yang Anda temukan di iTunes. Ini akan menampilkan informasi tentang keadaan proyek Anda, misalnya, ini akan memberitahu Anda 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 Xcode di antarmuka pengguna.

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.

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.

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 dua item.

Ada baiknya untuk mengetahui awal pada apa perbedaan antara sebuah proyek dan target. Seperti yang saya sebutkan sebelumnya, sebuah proyek adalah repositori untuk file, aset, dan data yang diperlukan untuk membangun satu atau lebih produk. Target, bagaimanapun, 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 dan 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 di iOS Simulator dengan memilih iPhone Retina (4 inci).

Jika semua berjalan baik, iOS 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.

Storyboard berisi salah satu item, kontroler pemandangan pemandangan putih yang Anda lihat dalam iOS 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 yang berisi kumpulan atribut yang berhubungan dengan obyek yang bernama View.

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

Klik pada tab dengan ikon kotak dan Gulir 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 kami akan membuat aplikasi dengan beberapa interaktivitas pengguna. Pengguna harus mampu menyentuh layar untuk mengubah warnanya.

Mendeteksi sentuhan di iOS aplikasi dapat dilakukan beberapa cara. Salah satu solusinya adalah dengan menggunakan tombol. Di Perpustakaan objek, menemukan item yang bernama UIButton 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.

Perubahan kedua kita perlu membuat memberitahu pengguna apa yang harus dilakukan dengan mengubah judulnya tombol. Bidang teks di samping label judul saat ini dibaca tombol. Mengubahnya ke keran mengganti warna dan mengatur warna teks ke hitam sehingga sangat mudah dibaca.

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 Ruby on Rails dan CodeIgniter.

Tampilan di antarmuka pengguna kami jatuh dalam kategori V dalam pola MVC. Pandangan ini dikendalikan oleh controller. Lihatlah nama file di proyek navigasi di sebelah kiri. File yang 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 menyentuh tombol dalam tampilan, itu adalah tanggung jawab controller untuk menangani sentuhan.

Bagaimana kita menangani acara sentuhan? Dalam kasus tombol kami, kami menambahkan tindakan untuk lihat controller. Tindakan adalah nama angan-angan untuk metode. Apa itu metode? Sebuah metode yang pada intinya fungsi C. Tunggu. Apa? Jangan khawatir tentang terminologi terlalu banyak saat ini. Dua posting akan menutupi C dan Objective-C 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 controller, itu sesuatu dalam respon. Dengan kata lain, jika pengguna menyentuh tombol dan kami menghubungkan metode untuk peristiwa sentuhan, kemudian controller akan melakukan sesuatu dalam menanggapi peristiwa sentuhan.

Untuk menambahkan tindakan untuk lihat controller yang mengelola tampilan di antarmuka pengguna kami, kita perlu membuat beberapa perubahan ke file bernama TSPViewController.h. File dengan ekstensi .h adalah file header. Kontroler Lihat file header berisi informasi tentang controller Lihat-Lihat kelas controller, tepatnya. Kita hanya perlu menambahkan satu baris kode ke header file. Lihatlah bagaimana saya memodifikasi file header Lihat controller.

Meskipun kita tidak akan fokus pada sintaks dalam tutorial ini, itu cukup mudah untuk memahami apa yang sedang terjadi. Nama tindakan atau metode adalah changeColor: dan memiliki satu argumen, pengirim. Jenis argumen adalah id, yang berarti setiap objek. Apakah objek lagi? Belalang kesabaran. Aksi berakhir dengan tanda titik koma.


10. melaksanakan tindakan

Kami telah menambahkan tindakan untuk lihat controller, tetapi tindakan tidak berbuat banyak. Apa yang kita lakukan adalah menyatakan suatu tindakan. Ini berarti bahwa setiap bagian dari aplikasi yang mengambil puncak di file header controller Lihat juga tahu bahwa ia memiliki tindakan bernama changeColor:. Hal ini seperti sebuah restoran yang menawarkan menu. Anda dapat melihat apa yang ditawarkan, tapi itu tidak menunjukkan apa yang masing-masing item pada menu tampak atau rasanya seperti.

Apa yang perlu kita lakukan adalah menerapkan tindakan dan kita melakukannya dalam tampilan controller implementasi file. Itu benar. File dengan ekstensi .m adalah file implementasi. Pilih file bernama TSPViewController.m dan melihat isinya.

Apakah Anda mengharapkan untuk menjadi kosong? Xcode telah memberikan kita beberapa kode boilerplate yang umum untuk lihat controller. Yang menyenangkan tentang Objective-C adalah bahwa ia memiliki nama metode yang sangat mudah dibaca. Pengembang sering mengeluh bahwa nama metode yang panjang, tetapi keuntungan adalah bahwa Anda tahu apa metode yang hanya dengan melihat namanya.

Untuk menerapkan changeColor: tindakan, kami menyalin apa yang kita menulis di header file dan mengganti tanda titik koma dengan pembukaan dan penutupan keriting penjepit.

Saya telah menambahkan isi file seluruh pelaksanaan sehingga Anda dapat melihat di mana Anda harus menambahkan implementasi metode. Perlu setelah @implementation TSPViewController dan sebelum @end terakhir. Perhatikan juga bahwa itu tidak dapat bersarang dalam implementasi metode lain.

Saatnya untuk melakukan sesuatu yang berguna dalam tindakan kita. Aku tidak akan menjelaskan setiap baris kode secara detail, tapi aku akan memberimu inti dari apa yang terjadi.

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, colorWithRed:green:blue:alpha:. Dalam baris terakhir dari tindakan kita, kita menetapkan warna latar belakang tampilan di antarmuka pengguna kami untuk warna ini baru, dihasilkan secara acak.

Kata diri merujuk ke tampilan controller. Jangan khawatir jika semua ini tidak masuk akal. Ini akan menjadi lebih jelas sekali kita telah membahas dasar-dasar C dan Objective-C dalam pelajaran berikutnya.

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


11. menghubungkan tindakan

Metode ini dilaksanakan, tetapi tidak ada yang spektakuler akan terjadi ketika 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 changeColor: aksi kebutuhan akan terpicu ketika tombol disadap?

Membuat koneksi ini sederhana. Buka storyboard dengan memilih file bernama 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 akan melihat aksi kami baru di bagian berlabel menerima tindakan.

Anda akan melihat lingkaran kosong di sebelah kanan dari changeColor: tindakan. Klik dan tarik dari lingkaran untuk tombol di antarmuka pengguna kami.

Menu akan muncul ketika Anda melepaskan mouse. Pop up 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 dari kebanyakan 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.


12. membangun dan menjalankan: mengambil 2

Membangun dan menjalankan aplikasi Anda di iOS 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.

Dalam dua posting, saya akan mencakup dasar-dasar C dan Objective-C. Hal ini akan mempersiapkan Anda untuk hal-hal menarik dalam sisa seri.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.