Birinchi SwiftUI View'ingiz

Ushbu bosqich 6 ta darsdan iborat bo'lib, ularning har biri taxminan 20 daqiqadan 35 daqiqagacha vaqt oladi. Kod misollari ustida ishlayotganingizda Xcode dasturi o'rnatilgan bo'lishi va canvas preview (kenevir ko'rinishi) ochiq bo'lishi kerak. Agar canvas'ni ko'rmasangiz, menyular panelidan Editor > Canvas bo'limiga o'ting yoki Option + Command + Return tugmalarini bosing. Agar preview to'xtatilgan bo'lsa, Resume tugmasini bosing yoki uni faollashtirish uchun Option + Command + P tugmalarini bosing.

Canvas ko'rinmayaptimi? Xcode dasturida Editor > Canvas (yoki Option + Command + Return) bo'limiga o'ting. Agar preview to'xtab qolgandek tuyulsa, uni qayta faollashtirish uchun Option + Command + P tugmalarini bosing. Siz ushbu bosqich davomida bundan doimiy ravishda foydalanasiz, shuning uchun buni refleksga aylantiring.

Har bir dars oxiridagi topshiriqni (challenge) o'tkazib yubormang. Ular qisqa va aynan ular orqali siz o'rgangan nazariy narsalarni amaliyotga aylantirasiz. 1-bosqich yakuniga yetganingizda, deklarativ UI qanday ishlashini tushuntira olasiz, ekranga Text, Image va Button elementlarini joylashtirib, ularni modifikatorlar (modifiers) yordamida shakllantira olasiz hamda VStack, HStack va ZStack yordamida elementlarni tartiblab, butunlay noldan chiroyli va mukammal profil kartasi tartibini (profile card layout) tuza olasiz.

SwiftUI kodining birorta ham qatorini yozishdan oldin, tafakkuringizda ma'lum bir burilish qilishingiz kerak. Bu unchalik katta o'zgarish emas, ammo buni chetlab o'tish keyinchalik ko'plab chalkashliklarga sabab bo'ladi. Ushbu dars aynan shu burilish haqida — va u to'liq konseptualdir. Hozircha kod yozmaymiz.

Siz hozirgacha Swift kodini imperativ dasturlash (imperative programming) deb ataladigan uslubda yozib keldingiz. Bunda siz kompyuterga bosqichma-bosqich aynan nima qilish kerakligini aytasiz: "O'zgaruvchi yarat. Ushbu massivni aylanib chiq. Ushbu funksiyani chaqir." Kompyuter ko'rsatmalaringizni ketma-ket bajaradi. Bu siz foydalanib kelgan an'anaviy yondashuv bo'lib, mantiq, ma'lumotlar va algoritmlar uchun juda yaxshi ishlaydi.

SwiftUI esa butunlay boshqa yondashuv — deklarativ dasturlash (declarative programming) uslubidan foydalanadi. Kompyuterga interfeysingizni bosqichma-bosqich qanday qurishni aytish o'rniga, uning qanday ko'rinishda bo'lishini tasvirlab berasiz — va SwiftUI uni qanday amalga oshirishni o'zi hal qiladi. Ushbu darsning oxiriga kelib, bu aslida nima ekanligi va ekranlarni yaratish uslubingizni qay darajada o'zgartirishi haqida aniq tushunchaga ega bo'lasiz.

Restoran analogiyasi (O'xshatish)

Bular o'rtasidagi farqni tushuntirishning eng oson yo'li: Tasavvur qiling, qorningiz ochdi va tuxum yemoqchisiz.

• Imperativ yondashuv: Oshxonaga kirasiz, tovani topasiz, gazni yoqasiz, moy quyasiz, ikkita tuxumni chaqasiz, chetlari qotguncha kutasiz, bir marta ag'darasiz, likopchaga olasiz, tuz sepasiz. Siz har bir qadamni o'zingiz tartib bilan bajaryapsiz.
• Deklarativ yondashuv: Restoranga o'tasiz, stolda o'tirib: "Iltimos, menga ikki tomoni ham pishgan ikkita tuxum olib keling", deysiz. Siz o'zingiz xohlagan yakuniy natijani tasvirlaysiz. Oshxona uni qanday tayyorlashni o'zi hal qiladi.

SwiftUI — bu restoranga o'xshaydi. Siz interfeysingizni tasvirlaysiz — "Menga ekranning o'rtasida joylashgan, 'Get Started' yozuvi bor ko'k rangli tugma kerak" — va SwiftUI uni chizish uchun kerak bo'lgan barcha narsalarni o'zi bajaradi. Piksellar, joylashuv bosqichlari yoki chizish chaqiruvlari bilan ishlamaysiz. Shunchaki yakuniy natijani tasvirlaysiz.

Asosiy o'zgarish: UIKit'da (eskiroq iOS freymvorkida) siz ilovaga UI yaratish yo'lini — tugma yaratish, uni ma'lum koordinatalarga joylashtirish, uni subview sifatida qo'shishni aytardingiz. SwiftUI'da esa ilovaga UI qanday ko'rinishda bo'lishi kerakligini aytasiz va u qanday qilishni o'zi boshqaradi. Bu boshida biroz g'alati tuyulishi mumkin, lekin keyinchalik juda tabiiy bo'lib qoladi.

Siz tasvirlaysiz, SwiftUI chizadi" degani aslida nimani anglatadi?

SwiftUI'da sizning vazifangiz interfeysingizning hozirgi holatini (state) tasvirlaydigan kod yozishdan iborat. SwiftUI ushbu tasvirni kuzatib boradi va ekranni u bilan avtomatik ravishda sinxronlashtiradi.

Yorug'lik kalitini tasavvur qiling:

• Imperativ tarzda siz quyidagicha aytgan bo'lardingiz: "Kimdir kalitni bosganda, ekrandan chiroq tasvirini top, uning rangini kulrangdan sariqqa o'zgartir, so'ngra pastdagi yozuvni yangila."
• Deklarativ tarzda esa shunday deysiz: "Agar isOn rost (true) bo'lsa, sariq chiroqni ko'rsat. Agar yolg'on (false) bo'lsa, kulrang chiroqni ko'rsat." SwiftUI isOn qiymatini kuzatib boradi va u o'zgarganda ekranni avtomatik yangilaydi. Siz ikkita mumkin bo'lgan holatni tasvirlaysiz — SwiftUI esa o'tish jarayonlarini o'zi boshqaradi.

Bu SwiftUI kodining eski UIKit yondashuviga qaraganda ancha qisqa va o'qish uchun oson bo'lishining eng katta sabablaridan biridir. Siz har bir mumkin bo'lgan o'zgarish uchun ko'rsatma yozmaysiz. Siz har qanday holatda interfeys qanday ko'rinishi kerakligini yozasiz.

Esda saqlash uchun fikrlash modeli: SwiftUI kodingizni ilovangizning hozirgi holatini (state) qabul qiladigan va ekranning qanday ko'rinishi kerakligini tasvirlovchi rasm qaytaradigan funksiya deb tasavvur qiling. SwiftUI holat o'zgarganda o'sha funksiyani chaqiradi va ekranni mos ravishda yangilaydi. Siz tasvirlaysiz. U esa chizadi.

Nima uchun bu hozir siz uchun muhim?

Agar siz SwiftUI'ga imperativ kod yozish uslubida yondashishga harakat qilsangiz, u bilan doimiy ravishda kurashasiz. Siz elementlarni qo'lda 'o'zgartirishni' xohlaysiz va bu siz kutgandek ishlamasa, chalkashib ketasiz. Buyruqlar haqida o'ylashni to'xtatib, tasvirlash haqida o'ylashni boshlagan lahzangizdan boshlab SwiftUI oson bo'lib qoladi.

Agar bu hali ham biroz mavhum tuyulsa, xavotir olmang. Navbatdagi darsda haqiqiy view'larni yozishni boshlaganingizda hammasi aniq bo'ladi. Ushbu dars shunchaki kod yozishdan oldin fikrlash modelingiz to'g'ri shakllanganligiga ishonch hosil qilish uchun xizmat qiladi.

Keng tarqalgan noto'g'ri tushuncha: 'Deklarativ' degani SwiftUI noaniq tasvirdan nimani xohlayotganingizni sehrli tarzda tushunadi degani emas. Baribir aniq bo'lishingiz kerak. Farqi shundaki, sizning aniqligingiz u yerga borish qadamlarini emas, balki yakuniy natijani tasvirlaydi.

Yana bir narsa: view'lar struct'lardir

SwiftUI'da ekranda ko'radigan har bir narsangiz view (ko'rinish) hisoblanadi. Matn qismi view. Tugma view. Rasm view. Hatto boshqa view'larni joylashtiradigan ko'rinmas konteynerlar ham view hisoblanadi.

Bu yerda Swift bilan bog'liqlik mavjud: har bir SwiftUI view'i View protokoliga mos keladigan struct (struktura) hisoblanadi. Siz struct nima ekanligini allaqachon bilasiz. SwiftUI view'i shunchaki bitta majburiy xususiyatga (property) — ekranda nima ko'rinishi kerakligini tasvirlovchi bodyga ega bo'lgan struct'dir.

Swift'da yangimisiz? SwiftUI Swift tilida qurilgan, shuning uchun mustahkam poydevor yordam beradi. Agar avval poydevor yaratmoqchi bo'lsangiz, Learn Swift seriyasini ko'rib chiqing va keyin shu yerga qayting.

Xcode dasturida yangi SwiftUI loyihasini ochganingizda, body xususiyati tayyor bo'lgan ContentView deb nomlangan struct'ni ko'rasiz. Bu andozadir (pattern). Siz yaratadigan har bir view shu andozaga amal qiladi.

Fikrlash modelingizni tekshirish uchun ai'dan foydalaning

AI vositalari tushunchani shunchaki o'qiganingizni emas, balki uni haqiqatda tushunganingizni tekshirish uchun juda mos keladi. Navbatdagi darsga o'tishdan oldin, hozirgina o'rganganlaringizni sinab ko'rish uchun ushbu prompt'lardan foydalanib ko'ring.

Fikrlash modelingizni tekshiring

Tushunchangizni tekshirish uchun AI'dan foydalaning — hali kod yozilmaydi

1. Men hozirgina imperativ va deklarativ UI dasturlash o'rtasidagi farqni o'rgandim. Ushbu tushuncha bo'yicha meni sinab ko'ra olasizmi? Savollarni birma-bir bering, javobim noto'g'ri bo'lsa yoki qaysidir qismni aniqroq tushuntira olsam, menga ayting.
2. Menga imperativ va deklarativ dasturlash o'rtasidagi farqga oid restorandan boshqa yana uchta hayotiy misol (analogiya) keltira olasizmi? Kod yozishdan oldin bu tushuncha boshqa kontekstlarda qanday ishlashini ko'rmoqchiman.

🎯 Topshiriq: kodlarsiz tushuntiring

Navbatdagi darsga o'tishdan oldin, deklarativ va imperativ UI o'rtasidagi farqni kod yozmagan do'stingizga tushuntirgandek, o'z so'zlaringiz bilan ikki yoki uchta gapda tushuntiring. Restoran misolidan foydalanmang. O'zingiz yangi misol o'ylab toping. Agar buni bajara olsangiz, demak fikrlash modelingiz tayyor.

• Maslahat: O'z hayotingizdan kimdirga bosqichma-bosqich ko'rsatma beradigan (imperativ) hamda shunchaki yakuniy natijani aytib, jarayonni unga topshiradigan (deklarativ) biror misol haqida o'ylang.