# 09. 10x Real-World Demo Loyihalar va Case Studies

> "Nazariya — bu xaritadir. Amaliyot — bu sayohat. Ushbu 10 ta real arxitektura loyihasi sizga har qanday sohada (FinTech, E-Commerce, Taxi, Media) SDUI tizimini qanday to'g'ri loyihalashni ko'rsatadi."

---

## 1. FinTech / Banking Dinamik Dashboard (Revolut / Kaspi uslubi)

```mermaid
graph TD
    Dashboard["FinTech Dashboard"] --> BalCard["1. Multi-Currency Balance Card"]
    Dashboard --> Actions["2. Dynamic Quick Actions (Transfer, QR Pay)"]
    Dashboard --> Promo["3. Credit / Loan Personalized Banner"]
    Dashboard --> Feed["4. Recent Transactions Infinite Feed"]

    style Dashboard fill:#131720,stroke:#bef264,stroke-width:2px
```

* **Muammo:** Bank foydalanuvchilarining toifasiga qarab (Oddiy mijoz, Premium, Biznes) ekran tubdan farq qilishi kerak. Shuningdek, har haftada yangi kredit aksiyalari chiqadi.
* **JSON Payload:**
  ```json
  {
    "screenId": "banking_home",
    "components": [
      {
        "id": "balance_widget_01",
        "type": "multi_currency_card",
        "props": {
          "primaryCurrency": "UZS",
          "primaryBalance": "28,450,000",
          "secondaryAccounts": [
            { "currency": "USD", "balance": "1,200.50" },
            { "currency": "EUR", "balance": "450.00" }
          ]
        }
      },
      {
        "id": "quick_actions_row",
        "type": "actions_carousel",
        "props": {
          "actions": [
            { "icon": "arrow.up.right", "title": "O'tkazma", "route": "app://transfer" },
            { "icon": "qrcode.viewfinder", "title": "QR To'lov", "route": "app://qr" },
            { "icon": "plus", "title": "Karta qo'shish", "route": "app://card/new" }
          ]
        }
      }
    ]
  }
  ```
* **Katta Yutuq:** Yangi "Ramazon krediti" paydo bo'lganda, backend faqat premium foydalanuvchilarga ushbu bannerni 1-o'ringa chiqaradi. Relizsiz!

---

## 2. E-Commerce Storefront va Flash Sale (Amazon / Uzum uslubi)

* **Muammo:** "Black Friday" yoki "Navro'z savdosi" vaqtida bosh sahifadagi barcha toifalar va bannerlar daqiqama-daqiqa o'zgarib turishi shart.
* **JSON Payload:**
  ```json
  {
    "type": "flash_sale_countdown",
    "props": {
      "endTimestamp": 1774882800,
      "badge": "Shoshiling! -70%",
      "products": [
        {
          "id": "prod_1",
          "title": "AirPods Pro 2",
          "oldPrice": "3,200,000",
          "newPrice": "2,490,000",
          "imageUrl": "https://cdn.azimjondev.uz/shop/airpods.png"
        }
      ]
    }
  }
  ```

---

## 3. Dinamik To'lov va Checkout Wizard (Multi-Payment)

```mermaid
flowchart LR
    Cart["Savatdagi Tovarlar"] --> ServerEval{"Backend Qoidalari:\nSumma > 5 mln so'mmi?"}
    ServerEval -->|"Ha"| Nasiya["Nasiya (Bo'lib to'lash) Variantini Chiqarish"]
    ServerEval -->|"Yo'q"| Standard["Faqat Karta va Naqd Pul"]
    
    Nasiya --> PaySelector["Dinamik PaymentMethodSelector"]
    Standard --> PaySelector
```

* **Muammo:** Har xil tovarlar uchun har xil to'lov usullari mavjud (Karta, Bo'lib to'lash / Nasiya, Naqd). Yangi to'lov tizimi (masalan Apple Pay yoki yangi fintech integratsiyasi) qo'shilganda eski ilovalar ham buni qo'llab-quvvatlashi lozim.
* **Yechim:** `PaymentMethodSelector` komponenti serverdan `[PaymentOption]` massivini oladi va faqat mijozga ruxsat berilgan usullarni chizadi.

---

## 4. Food Delivery va Taxi Jonli Buyurtma Tracker (WebSocket + SDUI)

```mermaid
sequenceDiagram
    autonumber
    participant Server as Dispatch Server (WebSocket)
    participant Client as iOS Client (Live Tracker)
    participant UI as Bottom Status Card

    Server->>Client: WS: { state: "searching_driver", actions: ["cancel"] }
    Client->>UI: "Haydovchi qidirilmoqda..." (Faqat "Bekor qilish" tugmasi)
    
    Server->>Client: WS: { state: "driver_assigned", driver: "Azizbek", car: "Nexia 3", actions: ["call", "chat"] }
    Client->>UI: Dinamik Yangilanish: Haydovchi kartasi va 2 ta yangi tugma paydo bo'ldi!
    
    Server->>Client: WS: { state: "arrived", waitTimeLeft: 300, actions: ["call"] }
    Client->>UI: Taymer va kutish shartlari ko'rsatiladi
```

* **Katta Yutuq:** Client tomonida yuzlab murakkab `if-else` shoxlanishlar yo'qoladi, ekran toza holat mashinasiga (State Machine) aylanadi.

---

## 5. Dinamik Onboarding va Paywall A/B Test (Superwall uslubi)

* **Muammo:** Obuna (Subscription) sotuvini oshirish uchun dizaynerlar har kuni turli xil narx jadvallari (Oylik vs Yillik), chegirmalar va ranglarni A/B test qilishadi.
* **Arxitektura:**
  * SDUI orqali butun Paywall ekrani boshqariladi. Tugma bosilganda StoreKit 2 native API chaqiriladi.
  * Schema narx, StoreKit Product ID va xususiyatlar ro'yxatini belgilaydi.

---

## 6. Video Feed va Ijtimoiy Tarmoq (Reels / TikTok uslubi)

* **Muammo:** Har bir video ustida dinamik belgilar (Live badge, Mahsulot tegi, Homiylik yozuvi) turlicha joylashadi.
* **Arxitektura:** `ZStack` asosidagi dinamik qatlam (Overlay Layer). Server qaysi teglarni qaysi koordinatada ko'rsatishni JSON orqali boshqaradi.

---

## 7. Faceted Search va Dinamik Filtrlar Tizimi

* **Muammo:** Krossovka qidirganda "O'lcham" va "Rang" filtrlari kerak, noutbuk qidirganda esa "RAM", "Protsessor", "SSD" filtrlari kerak.
* **Arxitektura:** Server qidiruv natijasi bilan birga `filters: [FilterComponent]` yuboradi. RangeSlider, CheckboxGroup, ColorPicker komponentlari dinamik yig'iladi.

---

## 8. In-App Qo'llab-Quvvatlash va Fikr-Mulohaza (CSAT Forms)

* **Muammo:** Foydalanuvchi buyurtmani baholaganida (1 yulduz yoki 5 yulduz) unga beriladigan savollar turlicha bo'lishi kerak.
* **Arxitektura:**
  * 1 yulduz bosilsa -> "Nima yoqmadi?" degan shikoyat tanlovlari chiqadi.
  * 5 yulduz bosilsa -> "Kuryerga choychaqa qoldirasizmi?" taklifi chiqadi. Hammasi server qoidalari bilan boshqariladi.

---

## 9. Mehmonxona va Sayohat Solishtirish Kartalari (Booking uslubi)

* **Muammo:** Turli mehmonxonalarda qulayliklar har xil (Hovuz, Wi-Fi, Nonushta). Ularning ikonkalari va qisqa xulosalari serverdan dinamik yig'iladi.
* **Arxitektura:** `FeatureChipsRow` komponenti va dinamik narx parchalanishi modal oynasi.

---

## 10. KYC va Pasport Verifikatsiyasi (Dynamic Step Wizard)

* **Muammo:** Har bir davlat qonunchiligi bo'yicha shaxsni tasdiqlash har xil: O'zbekistonda JSHSHIR + Pasport seriya, boshqa davlatda ID karta + Yuz skanerlash (Liveness).
* **Arxitektura:** Multi-step SDUI Wizard. Server foydalanuvchi qaysi davlat fuqarosi ekaniga qarab qadamlarni dinamik o'zgartiradi.

---

## 11. Xulosa: Staff Engineer Mezonlari

Ushbu 10 ta loyihani tahlil qilgach, quyidagi qonuniyatni ko'rish mumkin:
1. **Biznes logikasi — serverda.** Qaysi ekranda qanday ma'lumot va qadamlar bo'lishini biznes o'zgartiradi.
2. **Tajriba va tezlik — klientda.** 120 FPS animatsiya, haptic feedback, lokal kesh va xavfsizlik mobil ilova tomonidan kafolatlanadi.
3. Bu simbioz kompaniyaga raqobatchilardan 10x tezroq harakatlanish imkonini beradi.