Jurnal belajar ulang iOS saya Bagian 1

Ide blog ini adalah untuk berbagi dengan Anda apa yang telah saya pelajari sedetail mungkin dan memantapkan/menjawab pertanyaan apa pun yang saya miliki ketika saya belajar dari tutorial "zero-to-hero".

Dalam posting ini saya akan memulai dengan sesuatu yang SANGAT sederhana yang mungkin membutuhkan waktu 5 menit atau kurang untuk dibuat oleh pengembang berpengalaman. Tapi hei, kita semua memulai dari suatu tempat jadi mengapa tidak di sini

Berikut pratinjau dari apa yang akan kami buat di sini:

Seperti tradisi bahasa pemrograman lainnya, kami akan membuat aplikasi "hello world" yang saat pengguna mengetuk tombol, teks di atas akan menampilkan teks "hello world" dalam berbagai bahasa secara acak.

Tujuan aplikasi ini adalah untuk memahami dasar-dasar:

1. UILable UIKit, UIButton, dan UIImageView.
2. Deklarasi Variabel Swift dan Array.
3. IBOutlet dan IBActions.

Jadi mari kita mulai!

Pertama, buka Xcode Anda dan buat Aplikasi baru seperti ini:

Inilah bagian kuncinya: pilih ketuk iOS alih-alih ketuk Multiplatform atau Anda tidak dapat memilih Storyboard nanti dan harus bekerja dengan SwiftUI.

Sekarang di bawah Nama Produk, ketik "Hello World App" atau nama mewah lainnya yang mungkin ingin Anda panggil. Ini benar-benar terserah kreativitas Anda!

Sekarang apa sih Pengidentifikasi Organisasi itu?

Pengidentifikasi Organisasi adalah nama unik untuk aplikasi Anda agar orang lain dapat menemukan aplikasi Anda di App Store. Saya akan merekomendasikan Anda untuk mengetikkan nama belakang Anda lalu nama depan di sini untuk mempermudah proyek ini.

Jadi Pengidentifikasi Bundel Anda (tepat di bawah Pengidentifikasi Organisasi) akan terlihat seperti:

doejohn.Hello-World-App

Beberapa versi Xcode yang lebih lama mungkin menampilkan com.doejohn.Hello-World-App. Ini disebut nama domain terbalik hanya untuk informasi Anda.

Sekarang klik Berikutnya dan simpan proyek Anda di tempat yang Anda sukai dan klik Buat dan kita pergi ke bagian yang menyenangkan!

Setelah selesai, Xcode Anda akan terlihat seperti ini:

Jadi mari kita bahas secara singkat apa yang kita lihat di sini:

• Bagian oranye adalah sisi Navigator Anda yang saat ini menampilkan Project Navigator Anda. Di sini Anda melihat bahwa Anda memiliki Proyek Hello World di bagian atas dengan tiga folder di dalamnya: Hello World , Hello WorldTest s, dan Hello WorldUITests . Folder Hello World adalah tempat kita akan melakukan semua pengkodean dan pengeditan. Hello WorldTest s dan Hello WorldUITests dibuat secara otomatis untuk kita saat kita meninggalkan kotak centang Sertakan Tes saat kita membuat proyek selama fase pembuatan Nama. Saya akan membahas dua folder di pos lain jadi pantau terus!
• Bagian Hijau adalah bagian tentang informasi umum dan pengeditan aplikasi kami. Di bawah ketuk Umum di sini kita dapat melihat bahwa kita memiliki Nama Tampilan (nama aplikasi kita), Pengidentifikasi Bundel (apa yang telah kita bahas sebelumnya tentang nama domain terbalik), versi (seperti game, kita memiliki versi 1.0, 1.1, 2.x… dll )
• Info Pengembangan Bagian ungu adalah tempat saya ingin menghabiskan lebih banyak waktu untuk berdiskusi di sini. Mari kita pergi dari atas ke bawah di sini.
• Di bagian paling atas kami memiliki iOS 15.2 dengan iPhone dan iPad diperiksa tetapi Mac Catalyst. Ini karena ketika kami membuat proyek kami, kami memilih "iOS" dan bukan "multiplatform", karenanya mengatakan "kami hanya ingin aplikasi kami dijalankan di perangkat iOS." Bagian iOS 15.2 mengatakan "Versi iOS minimum untuk menjalankan aplikasi kami." Anda dapat mengekliknya dan memilih versi iOS lain yang paling tidak ingin digunakan oleh pengguna Anda. Berhati-hatilah untuk memeriksa apakah fungsi yang ingin Anda jalankan didukung dalam versi minimum yang Anda inginkan untuk dijalankan oleh pengguna Anda. Untuk aplikasi ini Anda harus baik-baik saja. Orientasi Perangkat mengatakan bahwa aplikasi Anda hanya berjalan di Potret, Terbalik, Lanskap Kiri, atau Kanan Lanskap seperti yang dapat Anda bayangkan seperti beberapa game hanya akan memungkinkan pemain bermain dalam orientasi tertentu. ItuBilah Status adalah tempat Anda dapat mengatur gaya tampilan bilah status Anda. Anda dapat bermain-main dengannya dan melihat bagaimana Anda menyukai tampilan aplikasi Anda. Untuk aplikasi ini kami hanya akan menyimpan semuanya dalam pengaturan default agar semuanya tetap sederhana.
• Bagian Kuning adalah tempat inspektur Anda. Jadi hal-hal seperti nama Aplikasi Anda, jalur lengkap ke file Anda, dll. Semuanya dapat ditemukan di bagian itu. Ini akan menjadi lebih berguna saat kita mengembangkan aplikasi kita dengan Storyboard.

Sekarang saya ingin Anda mengklik tombol yang telah saya soroti dengan kotak kuning. Ini akan memungkinkan kita untuk memiliki bagian tengah Xcode kita untuk dibagi menjadi dua sisi: Satu untuk menampilkan file Utama, dan yang lainnya kita akan menampilkan file ViewController kita.

Layar Anda mungkin terlihat seperti ini pada awalnya, tetapi Anda dapat dengan mudah mengeklik di kedua sisi yang ingin Anda ubah untuk menampilkan ViewController dan mengeklik ViewController di Bagian Navigator, lalu layar akan berubah.

Layar Anda akan terlihat seperti ini setelah Anda selesai. Sekarang mari kita bahas secara singkat apa arti baris kode yang kita lihat di ViewController:

Di bagian paling atas, kita melihat baris import UIKit yang mengatakan bahwa "hey, we want to import this framework/library to be used in this ViewController file!" Dalam hal ini kami ingin bekerja dengan UIKit, maka kami mengimpornya ke sini. Kami akan mengimpor lebih banyak di masa mendatang seperti Google Firebase, atau beberapa pustaka animasi UI yang ingin Anda tambahkan!

Selanjutnya, kita memiliki kelas ViewController: UIViewController{} ini mengatakan bahwa kita memiliki kelas bernama ViewController dan mewarisi dari UIViewController. Warisan di kelas berarti kita sebagai subkelas (ViewController) ingin dapat menggunakan semua metode, properti, dan karakteristik lain dari kelas super (UIViewController).

Di dalam Kelas ViewController kami, kami memiliki yang berikut:

Ini disebut fungsi. Fungsi khusus ini mengatakan apa yang harus terjadi saat tampilan ini pertama kali dimuat. Misalnya, jika kita ingin variabel Bintang selalu 0 saat tampilan ini dimuat, kita akan memiliki var bintang = 0 di sini.

Sekarang saya ingin Anda melihat bagian tengah Xcode Anda, di bilah paling atas harus ada tanda + seperti ini:

Klik itu dan kita akan melihat daftar objek yang dapat kita seret dan lepas ke Main Storyboard kita.

Seperti yang Anda lihat di Xcode, kami memiliki semua objek yang telah ditentukan sebelumnya yang siap digunakan untuk kami. Jadi mari kita seret objek Label dan Tombol ke Main Story Board kita.

Seperti yang Anda lihat saat pertama kali meletakkan Objek Label ke papan cerita, kita dapat meletakkannya di mana pun kita suka, sebesar apa pun yang kita suka. Jadi mari kita perluas label kita selebar garis putus-putus biru pertama di kedua sisi kiri dan kanan. Garis-garis itu adalah apa yang dikatakan Xcode kepada kita tentang "zona aman" agar objek kita ada. Mari kita juga mengubah teks dari Label menjadi Hello World sementara itu dengan mengklik dua kali Objek Label.

Sebelum itu, saya ingin kita melihat bagian kuadrat kuning pada gambar di atas. Ini disebut Inspektur Atribut di mana kita dapat mengubah hal-hal seperti warna teks, font, ukuran font, dll untuk Objek yang kita pilih. Di sini kita akan mengubah Ukuran Font menjadi 50, dan teks dari Label menjadi Hello World seperti yang kita lihat di bawah.

Selanjutnya, kita akan melakukan hal yang sama untuk Button Object. Saya akan menghemat waktu kami dan menyerahkan kepada Anda untuk melakukannya (pasti tidak malas di sini )

Sebagai hasil akhirnya, Anda harus memiliki sesuatu yang terlihat seperti ini. Sekarang kami (agak) aman untuk mengatakan bahwa bagian UI kami selesai! Beri diri Anda tepukan besar di punggung

Sekarang inilah pertanyaan besarnya: bagaimana aplikasi kami yang luar biasa tahu apa yang harus dilakukan saat pengguna mengetuk tombol? Atau apa yang harus dilakukan saat pengguna mengetuk tombol? Atau apa yang harus dilakukan Aplikasi saat mendeteksi pengguna kami mengalami beberapa krisis eksistensial seperti penulis?

Yah, pertanyaan terakhir mungkin di luar cakupan tutorial ini, tapi hei, kita bisa mengatasi dua yang pertama tanpa masalah.

Xcode membantu kami dan membuatnya sangat sederhana: Kontrol + Klik pada Obecjt dan seret ke file ViewController seperti ini:

Berhati-hatilah untuk TIDAK menyeretnya ke metode viewDidLoad().

Kotak dialog akan muncul seperti yang kita lihat di bagian kotak kuning, dan Xcode akan menanyakan nama untuk Label ini, sebut saja helloWorldText . Konvensi penamaan ini disebut Camel Casing.

Sekarang Label kita terhubung ke kode kita! Kami secara terprogram dapat memerintahkannya untuk melakukan penawaran kami! Muwahahaha!

Perhatikan bahwa Anda dapat melihat lingkaran yang diisi oleh baris kode IBOutlet di sana. Artinya Obyek ini terhubung dengan sesuatu di Storyboard.

Sekarang untuk Button kita akan melakukan hal yang sama tetapi sedikit berbeda; kami ingin tombol kami menjadi Tindakan, sesuatu yang dapat berinteraksi dengan kami dan bukan hanya untuk ditampilkan. Jadi, kita akan melakukan sebagai berikut

Pastikan bahwa di bawah Koneksi, Tindakan dipilih. Kami dapat menamainya HelloWorldAction di sini. Di bagian Acara adalah tempat kami menentukan apa yang terjadi saat pengguna melakukan sesuatu di sini. Di sini kami telah memilih Touch Up Inside, yang artinya saat pengguna mengetuk (menyentuh dan melepaskan) tombol.

Sekarang kita dapat mengetahui apa yang harus dilakukan aplikasi kita saat pengguna mengetuknya secara terprogram! Horor

Baiklah, mari kita ke bagian menarik dari aplikasi kita. Mari tambahkan dua baris kode di bawah UILabel kita:

var helloTextNumber = 0

var helloTextArray = ["halo dunia", "Hej Verden!", "Halo Wereld!", "Ciao mondo!", "Hei Verden!", "你好世界!"]

Mari kita bahas sedikit tentang apa itu kedua variabel tersebut.

helloTextArray adalah Array yang ingin kita gunakan untuk memilih "Hello World" kita dalam bahasa yang berbeda di sini. Di sini kita memiliki sebuah array String dari 6 String (String hanyalah tipe dengan “” di dalamnya.) Seperti banyak bahasa lain, Array dimulai dengan 0, bukan 1! Jadi berhati-hatilah saat Anda mengulang melalui Swift Arrays!

Jadi helloTextArray[0] akan menjadi “hello world”, helloTextArray[3] akan menjadi “Ciao mondo”, dan helloTextArray[5] akan menjadi “你好世界! ”

Berikut tautan ke dokumentasi Swift Apple tentang Array. Anda dapat membaca lebih mendalam tentang hal itu di sini:

Seperti yang telah kita lihat di atas, untuk mendapatkan elemen dari hellTextArray, kita perlu memberi tahu nomor mana yang kita inginkan (jadi yang pertama kita ucapkan helloTextArray[0], kedua helloTextArray[1], ketiga helloTextArray[2] … dll.) tetapi kita tidak bisa hanya mengetik satu per satu secara manual atau mengharapkan pengguna memasukkan nomor untuk kita (selalu mengharapkan yang paling sedikit dari pengguna. Sebuah prinsip yang telah saya pelajari.) Jadi, apa yang kita lakukan?

Ini dia helloTextNumber. helloTextNumber adalah variabel Integer (Int) yang ingin kita gunakan sebagai placeholder untuk elemen array yang ingin kita tampilkan. Kami akan memiliki metode yang menghasilkan Integer acak antara 0 dan 5 dan menggunakan helloTextNumber untuk menyimpan nomor itu untuk kami. Jadi kita bisa menampilkan elemen dari helloTextArray kita secara acak. Jika Anda agak bingung tentang bagian ini, jangan khawatir, itu akan jelas di bagian selanjutnya.

Berikut kode yang saya ingin Anda tambahkan:

Mari kita bahas apa yang ada di dalam blok kode hellowWorldAction kita.

Di sini kita telah mengatur helloTextNumber kita ke Int.random(in:0…5). Maksud dari baris kode ini adalah kita ingin helloTextNumber kita menjadi Integer yang dibuat secara acak dari 0 hingga 5 inklusif (artinya termasuk 5).

Ini sesuatu yang ingin saya bahas sedikit lebih jauh juga. Mari kita bicara tentang baris berikutnya

helloWorldText.text = helloTextArray[helloTextNumber]

Di Swift notasi titik ini mengikuti aturan

Siapa.Apa = Nilai

yang terurai menjadi:

“Siapa yang perlu diubah”

"dot"

“apa yang perlu diubah”

"sama"

"untuk apa itu harus diubah."

Jadi dengan kode kami, kami mengatakan bahwa:

Kami ingin teks helloWorldText (siapa) (apa) diubah menjadi elemen helloTextNumber helloTextArray.

Jadi ketika kita menjalankan baris kode ini, kita akan mengubah helloWorldText untuk menampilkan elemen mana pun di helloWorldTextArray, metode nomor Int.random() yang dihasilkan secara acak untuk helloWorldTextNumber kita.

Sekarang ketika kita menjalankan simulator kita (commnad + r, atau tombol ▶️ di bilah atas Xcode), ketika kita mengklik tombol kita, teks kita akan berubah setiap kali kita menekan tombol!

Hore! Kami telah menyelesaikan bagian pengkodean aplikasi kami!

Satu hal terakhir. Latar belakang kami sebenarnya agak jelek Kami ingin menambahkan semacam gambar latar belakang agar tidak terlihat biasa. Jadi, cari gambar yang sangat ingin Anda tambahkan sebagai latar belakang aplikasi Anda. Untuk saya, saya akan menggunakan gambar bumi (karena itu halo dunia kan?).

Sekarang mari kita klik 'Aset' di bawah folder Hello World, dan Anda akan melihat sesuatu seperti di bawah ini. Seret gambar yang Anda pilih dan jatuhkan ke kolom dengan "AccentColor" dan "Appicon". Di sinilah gambar kita akan berada dan dipanggil untuk digunakan.

Sekarang mari kita kembali ke 'Utama' dan jatuhkan objek Gambar dari perpustakaan objek (jika Anda lupa bagaimana melakukannya, gulir ke atas untuk melihat di mana kita berbicara tentang Objek Label dan Tombol). Saya ingin Anda memperluas objek Gambar begitu besar, sehingga menutupi seluruh layar ponsel Anda. Sekarang saya ingin Anda mengklik objek Gambar itu dan pergi ke Inspektur (panel sebelah kanan), dan cari ini:

Di bawah Tampilan gambar, saya ingin Anda mengeklik tarik-turun Gambar dan memilih gambar latar belakang yang telah Anda jatuhkan di Aset sebelumnya. Di sinilah kita dapat menentukan apa yang harus ditampilkan Objek Gambar tanpa harus mengkodekan apa pun di dalamnya. Rapi! Semakin sedikit coding semakin baik!

Sekarang layar Anda mungkin terlihat seperti ini:

Tunggu sebentar… apa yang terjadi di sini? Apa yang terjadi pada Label dan Kancing yang telah kami buat dengan susah payah?

Apa yang terjadi di sini hanyalah masalah lapisan. Bayangkan kita memiliki sebuah piring, sebuah apel, dan sebuah jeruk. Apa yang kami lakukan adalah kami telah menampilkan Apple dan Orange terlebih dahulu, kemudian kami meletakkan piring di atas keduanya, maka kami hanya melihat yang terlambat (gambar latar belakang), dan bukan apel (label) atau oranye (tombol) kami. Yang kita inginkan adalah meletakkan piring kita terlebih dahulu, lalu apel dan jeruk kita di atasnya.

Jadi bagaimana kita melakukannya? Apakah kita hanya perlu menghapus seluruh proyek kita dan mengulang semuanya?

Nah jika Anda ingin melakukan itu untuk memantapkan apa yang telah Anda pelajari di sini maka Anda dipersilakan untuk melakukannya! TETAPI Apple memberi kami cara yang lebih sederhana untuk melakukan itu.

Di sisi kiri screenshot sebelumnya, kita melihat 'View Controller Scene'. Di bawah itu kami memiliki 'View Controller' dan di bawah itu kami memiliki 'View' kami. Ini adalah layering View kita saat ini dengan Objek kita di dalamnya (Label, Tombol, dan Gambar) bersama dengan 'Area Aman' default, garis putus-putus biru yang kita lihat saat kita menyeret Objek kita.

Sekarang cukup seret Objek Gambar dari bawah ke kanan di bawah 'Area Aman' seperti:

Dan Voila! Kami melihat Label dan Tombol kami! Dan ketika kami menjalankan aplikasi ini di simulator kami, kami akan melihat semuanya berfungsi sebagaimana mestinya!

Saya harap ini membantu Anda memulai perjalanan belajar iOS dengan baik. Silakan tinggalkan komentar dan tepuk tangan jika Anda merasa ini bermanfaat

Tapi saya akan terus menulis lebih banyak tutorial di masa mendatang apa pun yang terjadi sayang sekali jika Anda tidak menyukai saya

Damai ✌