Azimjon Abdurasulov

09. 10x Real-World Demo Loyihalar & Case Studies

⚡ Server-Driven UI (SDUI) — Mukammal Enterprise & System Design

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)

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:
{
  "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:
{
  "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)

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)

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.

Markdown manba

iOS Lessons