9-bo‘lim

UML va modellashtirish

Klass, ketma-ketlik, holat va komponenta diagrammalari, C4 modeli va diagrammalarni kod sifatida yozish.

🕑 10 daqiqa o‘qish 📄 1 038 so‘z 👁 7 marta ko‘rilgan
Ushbu bo‘lim mundarijasi
  1. UML nima?
  2. Klass diagrammasi
  3. Mermaid bilan yozish
  4. Ketma-ketlik diagrammasi
  5. Holat diagrammasi
  6. C4 modeli
  7. Komponenta diagrammasi
  8. ERD - ma'lumotlar bazasi
  9. Diagramma chizish qoidalari
  10. Avtomatik yaratish
  11. Qachon diagramma chizish kerak?
  12. Xulosa

Diagramma - murakkab g'oyani tez yetkazish vositasi. Bir yaxshi rasm uch sahifa matndan foydaliroq.

UML nima? #

UML (Unified Modeling Language) - dasturiy tizimlarni vizual tasvirlash uchun standart belgilar to'plami.

UML ni to'liq o'rganish shart emas

UML da 14 turdagi diagramma bor. Amalda ularning 4-5 tasi ishlatiladi.

Maqsad - hujjat uchun "to'g'ri" diagramma chizish emas, balki hamkasbingizga g'oyani tushuntirish.

Agar oddiy quti va strelkalar tushunarli bo'lsa - shu yetarli.

DiagrammaNimani ko'rsatadiQanchalik kerak
KlassTuzilma, klasslar va aloqalarJuda ko'p
Ketma-ketlikVaqt bo'ylab o'zaro ta'sirKo'p
HolatObyekt holatlari va o'tishlarO'rtacha
KomponentaTizim qismlari va bog'liqliklarO'rtacha
FaoliyatJarayon oqimiKam
Foydalanish holatiAktyorlar va funksiyalarKam

Klass diagrammasi #

Klass diagrammasi Mijoz - id: int - ism: string - email: Email + buyurtmalar(): array + faolmi(): bool Buyurtma - id: int - holat: Holat - yaratilgan: DateTime + jami(): float + bekorQiling(): void Element - soni: int - narx: float + summa(): float 1 0..* 1 1..* Belgilar + ochiq (public) - yopiq (private) # himoyalangan (protected) 1, 0..*, 1..* - kardinallik bo'sh romb - agregatsiya to'la romb - kompozitsiya uchburchak - meros punktir - bog'liqlik
Klass diagrammasi - eng ko'p ishlatiladigan UML turi
Agregatsiya va kompozitsiya farqi
  • Agregatsiya (bo'sh romb): "bor" munosabati. Mijoz o'chsa, buyurtmalar qolishi mumkin.
  • Kompozitsiya (to'la romb): "qismi" munosabati. Buyurtma o'chsa, elementlari ham o'chadi - ular mustaqil yashay olmaydi.

Amalda bu farq bazadagi ON DELETE CASCADE yoki RESTRICT ga mos keladi.

Mermaid bilan yozish #

Diagrammalarni matn sifatida yozish - eng amaliy yondashuv.

Natija
classDiagram
    class Mijoz {
        -int id
        -string ism
        -Email email
        +buyurtmalar() array
        +faolmi() bool
    }

    class Buyurtma {
        -int id
        -Holat holat
        -DateTime yaratilgan
        +jami() float
        +bekorQiling() void
    }

    class Element {
        -int soni
        -float narx
        +summa() float
    }

    Mijoz "1" o-- "0..*" Buyurtma
    Buyurtma "1" *-- "1..*" Element
Nima uchun matn afzal?
Rasm (PNG)Matn (Mermaid)
Git da farqKo'rinmaydiSatrma-satr ko'rinadi
TahrirlashMaxsus dastur kerakIstalgan muharrir
Kod tekshiruviQiyinOddiy diff
YangilashKo'pincha unutiladiKod bilan birga

GitHub, GitLab va ko'p vositalar Mermaid ni to'g'ridan-to'g'ri ko'rsatadi.

Ketma-ketlik diagrammasi #

Vaqt bo'ylab obyektlar o'rtasidagi xabar almashinuvi.

Buyurtma berish jarayoni Xaridor Kontroller BuyurtmaServisi Ombor To'lov API POST /buyurtma yarating() zaxiraTekshir() true tolang() tasdiqlandi Buyurtma 201 Created To'liq strelka - chaqiruv · punktir - javob
Ketma-ketlik diagrammasi murakkab oqimlarni tushuntirishda ajoyib
Natija
sequenceDiagram
    actor Xaridor
    participant K as Kontroller
    participant S as BuyurtmaServisi
    participant O as Ombor
    participant T as To'lov API

    Xaridor->>K: POST /buyurtma
    K->>S: yarating(sorov)
    S->>O: zaxiraTekshir(elementlar)
    O-->>S: true
    S->>T: tolang(summa)
    T-->>S: tasdiqlandi
    S-->>K: Buyurtma
    K-->>Xaridor: 201 Created

    alt To'lov rad etildi
        T-->>S: rad etildi
        S-->>K: TolovXatosi
        K-->>Xaridor: 402 Payment Required
    end
Qachon ishlatiladi?
  • Yangi dasturchiga murakkab oqimni tushuntirishda
  • API integratsiyasini loyihalashda
  • Xato qayerda yuz berganini tahlil qilishda
  • Autentifikatsiya oqimini hujjatlashtirishda

Holat diagrammasi #

Buyurtma holatlari Yangi To'langan Yig'ilmoqda Yo'lda Yetkazildi Bekor to'lov tasdiq jo'natildi qabul bekor "Yo'lda" holatidan bekor qilib bo'lmaydi
Holat diagrammasi ruxsat etilmagan o'tishlarni ochib beradi
PHP
enum BuyurtmaHolati: string
{
    case Yangi = 'yangi';
    case Tolangan = 'tolangan';
    case Yigilmoqda = 'yigilmoqda';
    case Yolda = 'yolda';
    case Yetkazildi = 'yetkazildi';
    case Bekor = 'bekor';

    /** @return self[] */
    public function ruxsatEtilganOtishlar(): array
    {
        return match ($this) {
            self::Yangi      => [self::Tolangan, self::Bekor],
            self::Tolangan   => [self::Yigilmoqda, self::Bekor],
            self::Yigilmoqda => [self::Yolda, self::Bekor],
            self::Yolda      => [self::Yetkazildi],
            self::Yetkazildi => [],
            self::Bekor      => [],
        };
    }

    public function otishMumkinmi(self $yangi): bool
    {
        return in_array($yangi, $this->ruxsatEtilganOtishlar(), true);
    }
}

final class Buyurtma
{
    private BuyurtmaHolati $holat = BuyurtmaHolati::Yangi;

    public function holatOzgartiring(BuyurtmaHolati $yangi): void
    {
        if (!$this->holat->otishMumkinmi($yangi)) {
            throw new NotogriHolatOtishi($this->holat, $yangi);
        }

        $this->holat = $yangi;
    }
}
Diagramma to'g'ridan-to'g'ri kodga aylandi

Holat diagrammasining eng katta foydasi shu: u biznes qoidalarini oshkor qiladi.

"Yetkazilgan buyurtmani bekor qilish mumkinmi?" degan savol diagrammani chizayotganda tug'iladi - kod yozilgandan keyin emas.

C4 modeli #

UML dan soddaroq va amaliyroq yondashuv: to'rt daraja batafsillik.

C4 modeli - to'rt daraja 1. Kontekst Tizim va tashqi dunyo Kim ishlatadi? Nima bilan bog'lanadi? 2. Konteyner Ilovalar va bazalar Veb, API, baza, navbat, kesh 3. Komponenta Konteyner ichidagi modullar Kontrollerlar, servislar 4. Kod Klasslar Odatda chizilmaydi - IDE ko'rsatadi Xarita metaforasi Kontekst - dunyo xaritasi · Konteyner - mamlakat xaritasi Komponenta - shahar xaritasi · Kod - ko'cha xaritasi Amalda birinchi ikkitasi eng foydali
Har bir daraja o'z auditoriyasi uchun
Natija
Kontekst diagrammasi (1-daraja)

    [Xaridor]  ────────►  ┌─────────────────┐
                          │                 │
    [Operator] ────────►  │  Onlayn do'kon  │
                          │     tizimi      │
    [Admin]    ────────►  │                 │
                          └────────┬────────┘
                                   │
                    ┌──────────────┼──────────────┐
                    ▼              ▼              ▼
              [To'lov tizimi] [SMS xizmati] [1C buxgalteriya]
Natija
Konteyner diagrammasi (2-daraja)

  ┌──────────────┐     ┌──────────────┐     ┌──────────────┐
  │  Veb ilova   │────►│   REST API   │────►│    MySQL     │
  │  (React)     │     │   (PHP)      │     │              │
  └──────────────┘     └──────┬───────┘     └──────────────┘
                              │
                     ┌────────┼────────┐
                     ▼                 ▼
              ┌──────────┐      ┌──────────┐
              │  Redis   │      │  Navbat  │
              │  (kesh)  │      │ (RabbitMQ)│
              └──────────┘      └──────────┘
C4 nima uchun yaxshi?

UML ni to'liq bilish shart emas. C4 da faqat quti, strelka va matn ishlatiladi.

Muhimi - auditoriyaga mos daraja tanlash:

  • Direktorga - kontekst
  • Yangi dasturchiga - konteyner
  • Modul ustida ishlayotganga - komponenta

Komponenta diagrammasi #

Natija
graph TD
    A[Veb kontroller] --> B[BuyurtmaServisi]
    B --> C[BuyurtmaRepozitoriyi]
    B --> D[OmborServisi]
    B --> E[TolovServisi]
    C --> F[(MySQL)]
    D --> F
    E --> G[Tashqi to'lov API]
    B --> H[HodisaDispetcheri]
    H --> I[EmailXabarnoma]
    H --> J[StatistikaYozuvchi]

ERD - ma'lumotlar bazasi #

Natija
erDiagram
    MIJOZLAR ||--o{ BUYURTMALAR : beradi
    BUYURTMALAR ||--|{ ELEMENTLAR : ichida
    MAHSULOTLAR ||--o{ ELEMENTLAR : tanlangan
    MIJOZLAR ||--o{ MANZILLAR : ega

    MIJOZLAR {
        int id PK
        string ism
        string email UK
    }

    BUYURTMALAR {
        int id PK
        int mijoz_id FK
        decimal jami
        string holat
    }

Diagramma chizish qoidalari #

Yaxshi diagramma
  1. Bitta diagramma - bitta g'oya. Hammasini bitta rasmga tiqmang.
  2. 7 ± 2 element. Undan ko'p bo'lsa - bo'ling.
  3. Sarlavha bo'lsin - bu nima diagrammasi?
  4. Belgilar izohi bo'lsin, agar standart bo'lmasa.
  5. Yo'nalish izchil - chapdan o'ngga yoki yuqoridan pastga.
  6. Sanasi va muallifi yozilsin.
  7. Kod bilan birga saqlansin - repozitoriyda.
Diagramma eskiradi

Bu eng katta muammo. Bir yildan keyin diagramma haqiqatga mos kelmaydi va yanglishtira boshlaydi.

Yechimlar:

  1. Diagrammalarni matn sifatida repozitoriyda saqlang
  2. Kod tekshiruvida "diagramma yangilandimi?" deb so'rang
  3. Faqat barqaror narsalarni chizing (arxitektura, holatlar)
  4. O'zgaruvchan tafsilotlarni chizmang - ular kodda ko'rinadi
  5. Imkon bo'lsa - koddan avtomatik yarating

Avtomatik yaratish #

Terminal
# PHP klass diagrammasi
composer require --dev php-di/phpdoc-reader
vendor/bin/phpuml manba/ -o diagramma.png

# Baza sxemasi
mysqldump --no-data dokon | mysql-to-mermaid > sxema.mmd

# Bog'liqliklar grafigi
composer require --dev mamuz/php-dependency-analysis
Avtomatik yaratilgan diagramma har doim to'g'ri

Kod o'zgarsa - diagramma ham o'zgaradi. Eskirish muammosi yo'q.

Kamchiligi: u hamma narsani ko'rsatadi va o'qish qiyin bo'ladi. Muhim g'oyani yetkazish uchun qo'lda chizilgan soddalashtirilgan diagramma yaxshiroq.

Qachon diagramma chizish kerak? #

VaziyatDiagramma
Yangi arxitektura loyihalashC4 kontekst + konteyner
Murakkab oqimni tushuntirishKetma-ketlik
Baza sxemasini kelishishERD
Biznes qoidalarini aniqlashHolat
Yangi dasturchini tanishtirishC4 konteyner
Refaktoring rejalashtirishKomponenta
Oddiy CRUD modulKerak emas
Diagramma - maqsad emas, vosita

"Hujjat uchun UML chizish kerak" degan talab ko'pincha vaqtni behuda sarflashga olib keladi.

Diagramma muammoni hal qilishga yoki tushuntirishga yordam bersa - chizing. Aks holda - yozmang.

Amaliy topshiriq
  1. Loyihangizning 5 ta asosiy klassi uchun klass diagrammasi chizing.
  2. Uni Mermaid formatida yozing.
  3. Foydalanuvchi ro'yxatdan o'tish oqimi uchun ketma-ketlik diagrammasi chizing.
  4. Xato holatini alt blok bilan qo'shing.
  5. Biror obyekt uchun holat diagrammasi chizing.
  6. Uni PHP enum ga aylantiring, o'tish tekshiruvi bilan.
  7. C4 kontekst diagrammasini chizing: aktyorlar va tashqi tizimlar.
  8. C4 konteyner diagrammasini chizing.
  9. Baza uchun ERD yozing.
  10. Diagrammalarni hujjatlar/ papkasiga qo'ying va Git ga kiriting.

Xulosa #

  • UML - vizual tasvirlash standarti; amalda 4-5 turi ishlatiladi.
  • Klass diagrammasi - tuzilma va aloqalarni ko'rsatadi.
  • Agregatsiya ("bor") va kompozitsiya ("qismi") farqiga e'tibor bering.
  • Ketma-ketlik diagrammasi murakkab oqimlarni tushuntirishda ajoyib.
  • Holat diagrammasi biznes qoidalarini oshkor qiladi va kodga to'g'ridan-to'g'ri aylanadi.
  • C4 modeli - UML dan soddaroq, to'rt daraja batafsillik.
  • Diagrammalarni matn sifatida (Mermaid) yozing - Git bilan ishlaydi.
  • Bitta diagramma - bitta g'oya, 7 ± 2 element.
  • Diagramma eskiradi - faqat barqaror narsalarni chizing.
  • Diagramma - vosita, majburiy hujjat emas.

Keyingi bo'limda ma'lumotlar bazasini loyihalashni ko'ramiz.

Xatolik topdingizmi?

Imlo xatosi, ishlamaydigan kod yoki noto‘g‘ri ma‘lumotni ko‘rsangiz - bizga xabar bering. Har bir xabar administrator tomonidan ko‘rib chiqiladi.