PreviewProvider — এটি কী, SwiftUI প্রোটোকল এবং Xcode সেটআপ

PreviewProvider কী?

PreviewProvider একটি SwiftUI প্রোটোকল যা Xcode Canvas-এ প্রিভিউ কন্টেন্ট তৈরির জন্য চুক্তি নির্ধারণ করে। প্রোটোকলটিতে একটি বাধ্যতামূলক বৈশিষ্ট্য রয়েছে: previews টাইপ some View। previews দ্বারা ফেরত দেওয়া যেকোনো মান Canvas-এ একটি ইন্টারেক্টিভ প্রিভিউ হিসাবে প্রদর্শিত হয়। PreviewProvider-এর উত্তরাধিকার প্রয়োজন হয় না — একটি extension-এ স্ট্যাটিক বাস্তবায়ন যথেষ্ট।

স্থাপত্যিকভাবে, PreviewProvider SwiftUI রানটাইমের অংশ নয় — এটি সম্পূর্ণরূপে একটি উন্নয়ন টুল। প্রোটোকলটি @available(iOS 13.0, *) অ্যাট্রিবিউট দিয়ে চিহ্নিত এবং রিলিজ বিল্ডে কম্পাইল হয় না, কারণ Xcode প্রোডাকশন থেকে প্রিভিউ কোড বাদ দিতে শর্তসাপেক্ষ কম্পাইলেশন ব্যবহার করে। এর অর্থ PreviewProvider বাইনারি আকার বা অ্যাপ্লিকেশন কর্মক্ষমতা প্রভাবিত করে না।

previews প্রোটোকল

previews বৈশিষ্ট্য PreviewProvider-এর একমাত্র প্রয়োজনীয়তা। এটি যেকোনো View ফেরত দিতে হবে: সরল Text থেকে Group এবং ForEach সহ জটিল শ্রেণিবিন্যাস পর্যন্ত। Xcode ফেরত দেওয়া View-কে Canvas-এ রেন্ডার করে, সিস্টেম সেটিংস (থিম, আকার, ফন্ট) প্রয়োগ করে।

import SwiftUI

struct GreetingView: View {
    let name: String
    
    var body: some View {
        Text("Hello, \(name)!")
            .padding()
    }
}

// PreviewProvider — static implementation
struct GreetingView_Previews: PreviewProvider {
    static var previews: some View {
        GreetingView(name: "World")
    }
}

নামকরণ প্রথা: Apple প্রিভিউ স্ট্রাকচারের নাম {ViewName}_Previews রাখার সুপারিশ করে। এটি কম্পাইলারের জন্য বাধ্যতামূলক নয়, তবে পঠনযোগ্যতা এবং প্রজেক্ট নেভিগেশন উন্নত করে। Xcode নতুন SwiftUI ফাইল তৈরি করার সময় স্বয়ংক্রিয়ভাবে এই টেমপ্লেট সন্নিবেশ করে।

PreviewProvider কীভাবে কাজ করে: প্রোটোকল এবং previews পদ্ধতি

কাজের পদ্ধতি PreviewProvider স্ট্যাটিক ডিসপ্যাচের উপর ভিত্তি করে: Xcode শুধুমাত্র Debug কনফিগারেশনের জন্য PreviewProvider extension কম্পাইল করে এবং Canvas নির্মাণ প্রক্রিয়ার সময় previews কল করে। প্রতিবার কোড পরিবর্তন হলে, Xcode শুধুমাত্র পরিবর্তিত PreviewProvider পুনরায় কম্পাইল করে, যা প্রায় তাৎক্ষণিক প্রিভিউ আপডেট নিশ্চিত করে।

SwiftUI সিমুলেটর বা ডিভাইসে প্রিভিউ এবং চূড়ান্ত UI-এর মধ্যে সঠিক মিলের গ্যারান্টি দেয় না — Canvas সরলীকৃত রেন্ডারিং ব্যবহার করে। বিলম্ব সহ অ্যানিমেশন ভুলভাবে প্রদর্শিত হতে পারে, এবং কিছু UIKit উপাদান (MapKit, WebView) অতিরিক্ত কনফিগারেশন ছাড়া Canvas-এ রেন্ডার হয় না।

Group-এর মাধ্যমে একাধিক প্রিভিউ

Group একটি View-এর একাধিক অবস্থা একসাথে প্রদর্শনের অনুমতি দেয়, বিভিন্ন কনফিগারেশন তৈরি করার সময় পুনরাবৃত্তি দ্রুত করে। Group-এর ভিতরে প্রতিটি প্রিভিউ স্বাধীনভাবে রেন্ডার হয়।

struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ButtonView(title: "Primary", style: .primary)
                .previewDisplayName("Primary")
            
            ButtonView(title: "Disabled", style: .primary)
                .disabled(true)
                .previewDisplayName("Disabled")
            
            ButtonView(title: "Secondary", style: .secondary)
                .previewDisplayName("Secondary")
        }
    }
}

previewDisplayName Canvas-এ প্রতিটি প্রিভিউতে একটি লেবেল যোগ করে, যা একাধিক অবস্থার তুলনা করার সময় বিশেষভাবে কার্যকর। Group-এ প্রিভিউর সর্বাধিক সংখ্যা সীমাবদ্ধ নয়, তবে 6–8-এর বেশি Canvas ধীর করে দেয়।

Xcode-এ প্রিভিউ কনফিগারেশন

Xcode প্রদান করে প্রিভিউ প্রদর্শন কনফিগার করার জন্য বেশ কিছু মডিফায়ার। প্রধানগুলি: previewDevice — একটি নির্দিষ্ট ডিভাইস অনুকরণ করে (iPhone 16 Pro, iPad Air, Apple Watch Ultra), previewLayout — আকার সেট করে (device, fixed, sizeThatFits)। এই মডিফায়ারগুলির সংমিশ্রণ প্রিভিউ পরিবেশের উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়।

previewDevice ডিভাইসের নাম সহ একটি স্ট্রিং গ্রহণ করে, উদাহরণস্বরূপ "iPhone 16 Pro" বা "iPad Pro 13-inch (M4)"। উপলব্ধ ডিভাইসের তালিকা Xcode-এ ইনস্টল করা সিমুলেটরের উপর নির্ভর করে। ডিভাইসটি না পাওয়া গেলে, Canvas ত্রুটি ছাড়াই ডিফল্ট ডিভাইসে প্রিভিউ প্রদর্শন করে।

বিভিন্ন ডিভাইসের জন্য প্রিভিউ

সাধারণ অনুশীলন হল অভিযোজনযোগ্যতা পরীক্ষা করার জন্য একটি View একসাথে একাধিক ডিভাইসে দেখানো। এর জন্য ডিভাইস নামের একটি অ্যারে সহ ForEach ব্যবহার করা হয়।

struct AdaptiveView_Previews: PreviewProvider {
    static var previews: some View {
        ForEach(["iPhone SE (3rd generation)", "iPhone 16 Pro Max", "iPad Pro 13-inch (M4)"], id: \.self) { device in
            AdaptiveView()
                .previewDevice(.previewDevice(device))
                .previewDisplayName(device)
        }
    }
}

PreviewProvider উদাহরণ

ব্যবহারিক উদাহরণ PreviewProvider-এর বিভিন্ন ব্যবহারের পরিস্থিতি দেখায়: সরল প্রিভিউ থেকে লাইভ ডেটা এবং UIKit সামঞ্জস্য সহ জটিল কনফিগারেশন পর্যন্ত।

মক ডেটা সহ প্রিভিউ

মক ডেটা প্রিভিউ-এর জন্য একটি মানক প্যাটার্ন যখন View একটি মডেল গ্রহণ করে। বাস্তব API-এর পরিবর্তে, পরীক্ষামূলক ডেটা প্রতিস্থাপিত হয়, যা অ্যাপ্লিকেশন চালু না করেই UI অবস্থার দৃশ্য নিশ্চিতকরণের অনুমতি দেয়।

struct UserProfileView: View {
    let user: User
    
    var body: some View {
        VStack {
            AsyncImage(url: user.avatarURL)
                .clipShape(Circle())
            Text(user.name)
                .font(.title)
            Text(user.bio)
                .font(.body)
                .foregroundColor(.secondary)
        }
    }
}

struct UserProfileView_Previews: PreviewProvider {
    static var previews: some View {
        UserProfileView(user: .mock)
            .previewDisplayName("Profile")
        
        UserProfileView(user: .mockLongName)
            .previewDisplayName("Long Name")
    }
}

UIViewRepresentable-এর মাধ্যমে UIKit প্রিভিউ

UIKit সামঞ্জস্য — PreviewProvider UIViewRepresentable-এ মোড়ানো UIKit উপাদানের সাথেও কাজ করে। এটি সম্পূর্ণ প্রজেক্ট মাইগ্রেট না করেই SwiftUI Canvas-এ বিদ্যমান UIKit ভিউ প্রিভিউ করার অনুমতি দেয়।

struct MapViewRepresentable: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView()
    }
    
    func updateUIView(_ uiView: MKMapView, context: Context) {
        // Configure map
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapViewRepresentable()
    }
}

PreviewProvider এবং SwiftUI Canvas

Canvas হল Xcode-এর ভিজুয়াল এডিটর যা PreviewProvider-এর আউটপুট রিয়েল টাইমে রেন্ডার করে। PreviewProvider বাস্তবায়ন ছাড়া, Canvas খালি থাকে। Canvas এবং PreviewProvider জোড়ায় কাজ করে: PreviewProvider নির্ধারণ করে কী দেখাতে হবে, Canvas নির্ধারণ করে কোথায় এবং কীভাবে।

এটি বোঝা গুরুত্বপূর্ণ: Canvas প্রিভিউ নির্বাহ পরিবেশ, PreviewProvider-এর বিকল্প নয়। এমনকি ডেভেলপার Canvas না খুললেও, PreviewProvider Canvas আইকনে হোভার করার সময় পপআপ প্রিভিউ-এর মাধ্যমে দ্রুত কোড পরীক্ষার জন্য ব্যবহার করা যেতে পারে। WWDC 2024 অনুসারে, Apple ইউনিট টেস্ট লেখার মতো, প্রতিটি View-এর জন্য PreviewProvider লেখার সুপারিশ করে।

সুপারিশ: প্রজেক্টের প্রতিটি পাবলিক View-এর জন্য PreviewProvider লিখুন। এটি নতুন ডেভেলপারদের অনবোর্ডিং দ্রুত করে, কোড পর্যালোচনা সহজ করে এবং সম্পূর্ণ প্রজেক্ট তৈরি না করেই দ্রুত ভিজুয়াল পরিবর্তন যাচাইয়ের অনুমতি দেয়।

PreviewProvider-এর সাথে সাধারণ সমস্যা

সমস্যা 1: প্রিভিউ আপডেট হয় না। Canvas যদি কোড পরিবর্তন প্রতিফলিত না করে, কারণ সাধারণত DerivedData ক্যাশে। Product → Clean Build Folder (⇧⌘K) এর মাধ্যমে DerivedData পরিষ্কার করুন বা ~/Library/Developer/Xcode/DerivedData ফোল্ডার মুছুন। পরিষ্কারের পরে, Canvas নতুন করে প্রিভিউ তৈরি করে।

সমস্যা 2: PreviewProvider @StateObject দেখে না। PreviewProvider View-এর একটি স্ট্যাটিক ইনস্ট্যান্স তৈরি করে, তাই ইনজেকশন প্রয়োজন এমন নির্ভরতা (ViewModels, সার্ভিস) ইনিশিয়ালাইজার বা ডিফল্ট মান সহ @StateObject-এর মাধ্যমে পাস করতে হবে। প্রিভিউ-এ বাস্তব সার্ভিসের পরিবর্তে মক অবজেক্ট ব্যবহার করুন।

সমস্যা 3: Canvas-এ অ্যানিমেশন কাজ করে না। Canvas সব SwiftUI অ্যানিমেশন সমর্থন করে না — বিশেষ করে যেগুলি সময়ের উপর নির্ভর করে (withAnimation বিলম্ব সহ, .spring)। অ্যানিমেশন পরীক্ষার জন্য, সিমুলেটরে অ্যাপ্লিকেশন চালান। Canvas স্ট্যাটিক লেআউট যাচাইয়ের জন্য উপযুক্ত।

নির্ভরতা সহ PreviewProvider ঠিক করা

নির্ভরতা ইনজেকশন জটিল ViewModels-এর সাথে PreviewProvider কাজ করার সর্বোত্তম উপায়। পরীক্ষামূলক ডেটা সহ একটি পৃথক ViewModel ইনস্ট্যান্স তৈরি করুন এবং এটি View ইনিশিয়ালাইজারে পাস করুন।

struct DashboardView: View {
    @StateObject var viewModel: DashboardViewModel
    
    var body: some View {
        List(viewModel.items) { item in
            Text(item.title)
        }
    }
}

struct DashboardView_Previews: PreviewProvider {
    static var previews: some View {
        DashboardView(viewModel: DashboardViewModel.mock)
    }
}

মক এক্সটেনশন: ViewModel-এর জন্য একটি extension তৈরি করুন যা স্ট্যাটিক .mock ইনস্ট্যান্স প্রদান করে। এটি পরীক্ষামূলক ডেটা ViewModel-এর কাছে রাখে এবং PreviewProvider-কে পঠনযোগ্য করে তোলে।