Published on

Loyiha sozlamalari va Umumiy komponentlar

Authors

Loyihani boshlash

Ushbu kursdagi barcha dizaynlarni biz bitta yirik loyiha ichida quramiz. Shunday ekan, avvalo yangi SwiftUI loyiha ochib, uni SwiftUI_In_Practice deb nomlaymiz.

Loyihada Shared deb nomlangan papka ochib olamiz. Chunki, turli xil ilovalar dizaynini yasaganimizda (Spotify, Netflix va h.k.), hammamizga bir xil kerak bo'ladigan asosiy yordamchi kodlarni shu papkada saqlaymiz.

1. Rasm yuklovchi: ImageLoaderView

Biz ekranlarni realroq qilib yasashimiz uchun juda ko'p rasmlardan foydalanamiz. Ularni qo'lda qo'shib o'tirmaslik uchun, rasmlarni avtomatik tarzda internetdan tortib olamiz. Buning uchun bizga SDWebImageSwiftUI paketi kerak bo'ladi. Uni loyihaga o'rnatamiz.

So'ngra, Shared papkasida ImageLoaderView degan fayl ochamiz:

import SwiftUI
import SDWebImageSwiftUI

struct ImageLoaderView: View {
    var urlString: String = "https://picsum.photos/600/600" // Tasodifiy rasm linki
    var resizingMode: ContentMode = .fill

    var body: some View {
        Rectangle()
            .opacity(0.001)
            .overlay {
                WebImage(url: URL(string: urlString))
                    .resizable()
                    .indicator(.activity) // Yuklanayotganda spinner aylanadi
                    .aspectRatio(contentMode: resizingMode)
                    .allowsHitTesting(false)
            }
            .clipped()
    }
}

Bu fayl orqali biz qayerda rasm kerak bo'lsa, shunchaki ImageLoaderView() deb yozamiz xolos.

2. Ma'lumotlar bazasi: DatabaseHelper

Interfeyslarni shunchaki o'lik kod bilan emas, real ishlaydigan xuddi serverdan ma'lumot kelayotgandek yasashimiz kerak. Buning uchun DummyJSON.com saytidagi tekin ochiq API'lardan foydalanamiz. Bular Products va Users (mahsulotlar va foydalanuvchilar).

Buning uchun Shared ichiga DatabaseHelper.swift faylini yaratib, internetdan ma'lumot olib keluvchi funksiyalarni yozamiz:

import Foundation

struct DatabaseHelper {

    func getProducts() async throws -> [Product] {
        guard let url = URL(string: "https://dummyjson.com/products") else {
            throw URLError(.badURL)
        }

        let (data, _) = try await URLSession.shared.data(from: url)
        let products = try JSONDecoder().decode(ProductArray.self, from: data)
        return products.products
    }

    func getUsers() async throws -> [User] {
        guard let url = URL(string: "https://dummyjson.com/users") else {
            throw URLError(.badURL)
        }

        let (data, _) = try await URLSession.shared.data(from: url)
        let users = try JSONDecoder().decode(UserArray.self, from: data)
        return users.users
    }
}

Albatta, ularning Model larini ham o'zimizga moslab qisqartirib tuzib olamiz. Shunda ekranlarimiz tayyor va o'zgaruvchan ma'lumotlar bilan to'ldirilishga tayyor bo'ladi.

3. Qo'shimcha paketlar

Ekranda elementlarni oson boshqarish, kodlarni qisqartirish hamda sahifalar orasidagi o'tishlarni tartibga solish uchun o'zimiz o'rgangan paketlarimizni qo'shamiz:

  • SwiftfulUI
  • SwiftfulRouting

Mana loyihamiz poydevori tayyor bo'ldi. Endi eng zo'r va kreativ dizaynlarni yasashni boshlashimiz mumkin!

Buy mea coffee