Eğitimler

Mimari diyagramlar oluştur

Galaxium Travels kod tabanını analiz etmek ve Mermaid UML sınıf diyagramları, sıra diyagramları ve kullanım durumu diyagramları oluşturmak için IBM Bob'u kullan. Kodu keşfetmek için Ask modunda bağlam bahislerini ve sonuçları deponuza kaydetmek için Agent modunu nasıl kullanacağını öğren.

Mimari diyagramlar, bir kod tabanını değiştirmeden önce paylaşılan bir görsel dil sağlar. Bu eğitimde, Galaxium Travels kaynak dosyalarını okumak ve üç tür UML diyagramı oluşturmak için Bob'u kullanıyorsun: bir UML sınıf diyagramı, bir sıra diyagramı ve bir kullanım durumu diyagramı. Kodu güvenli bir şekilde keşfetmek ve Mermaid kullanan diyagram işaretlemesini oluşturmak için Ask modunu kullanıyorsun. Ardından diyagramları projeye kaydetmek için Agent moduna geçiyorsun.

GitHub, Markdown dosyalarında Mermaid diyagramları için yerel destek sağlar, böylece oluşturulan diyagramları .md dosyaları olarak kaydedebilir ve GitHub'da işlenmiş olarak görüntüleyebilirsin.

Bu eğitimde, Bob'un çıktısı kod tabanının mevcut durumuna bağlı olarak örneklerden farklı olabilir. Oluşturulan işaretlemeyi başlangıç noktası olarak kullan ve gerektiğinde iyileştir.

Öğreneceğin temel özellikler

  • Bağlam bahisleri: @ sembolünü kullanarak promptlarında belirli dosyalara ve klasörlere referans ver. Bağlam bahisleri, Bob'un doğru diyagramlar oluşturmak için hangi dosyaları analiz edeceğini tam olarak bilmesini sağlar.
  • Ask modu: Bob dosyalarında herhangi bir değişiklik yapmadan kodu oku ve analiz et.
  • Agent modu: Bob'un oluşturulan yapıları projenizde kalıcı hale getirmek için dosyaları özerk olarak yazmasına izin ver.

Ön koşullar

Bu eğitimi tamamlamak için aşağıdakilere ihtiyacın var:

  • Bob IDE kurulu.
  • Galaxium Travels örnek deposunu klonlayabilmen için yerel olarak kurulu Git.
  • Bob kullanmanın temellerine aşinalık. Bob'da yeniysen, Hızlı başlangıç eğitimi ile başla.

Çalışma alanını ayarla

Galaxium Travels deposunu klonla

Terminalinde, Galaxium Travels örnek deposunu klonlamak için aşağıdaki komutu çalıştır:

git clone https://github.com/ibm/galaxium-travels.git

IBM Bob'u başlat

Bilgisayarında IBM Bob IDE'yi başlat.

Örnek projeyi aç

Bob IDE'de, klonladığın galaxium-travels klasörünü aç. Bob "Klasördeki dosyaların yazarlarına güveniyor musun?" diye sorarsa, Evet, yazarlara güveniyorum'a tıkla.

Uygulamaya ve mimarisine genel bir bakış elde etmek için kök dizindeki README.md dosyasını incele. Galaxium Travels uygulaması, bir React frontend'i, bir Python FastAPI backend'i ve bir Java envanter tutma servisi ile bir uçuş rezervasyon sistemini simüle eder. Kod tabanı kasıtlı olarak karmaşık ve gerçek dünya uygulamalarını temsil edicidir, bu da onu mimari diyagramlar oluşturmak için harika bir aday yapar.

Bob sohbet arayüzünü aç

Sohbet arayüzü zaten açık değilse, gezinme çubuğundaki Bob simgesine tıkla veya Option + Command + B (Mac) veya Ctrl + Alt + B (Windows) kısayolunu kullan.

Proje bağlamını başlat

Bob varsayılan olarak Agent modunda başlar. Mod değiştirdiysen, başlatma komutunu çalıştırmadan önce Agent moduna geçtiğinden emin ol. Bob'un proje bağlamını ayarlamak için dosya yazması gerekir.

Sohbet arayüzü giriş alanına /init komutunu gir. Otomatik onay devre dışıysa, Bob dosyaları okumak ve AGENTS.md dosyalarını yazmak için izin ister.

 /init

Bob projedeki ilgili dosyaları okur. Bob daha sonra kök dizinde ana AGENTS.md dosyasını oluşturur. Bob ayrıca her mod için bir AGENTS.md içeren bir .bob klasörü oluşturur.

Bob'un proje bağlamını nasıl ayarladığını ve her modda hangi yeteneklere sahip olduğunu anlamak için oluşturulan AGENTS.md dosyalarını incele.

Ask moduna geç

Sohbet giriş alanının altındaki mod seçicide Ask'i seç. Alternatif olarak mod değiştirmek için sohbet giriş alanına /ask yazabilirsin.

Agent modunun aksine, Ask modu salt okunurdur. Bob dosyaları okuyabilir ve analiz edebilir ancak hiçbir şey oluşturamaz veya değiştiremez, bu da onu kod keşfi için güvenli hale getirir.

UML sınıf diyagramı oluştur

Bir UML sınıf diyagramı, bir uygulamanın veri modelini eşler: varlıklar (sınıflar), özellikleri ve aralarındaki ilişkiler. Galaxium Travels için bu, backend'deki Python SQLAlchemy modellerini ve envanter tutma servisindeki Java domain sınıflarını kapsar.

Her iki servisteki veri modellerini analiz etmek ve bir Mermaid classDiagram üretmek için bir prompt oluştur. Bob'un analiz etmesi için ilgili dosyaları belirtmek için bağlam bahislerini kullan. Varsayılan olarak, Bob Mermaid diyagramını işlenmiş bir görüntü olarak çıktılar. Ham Mermaid işaretlemesini incelemek için promptuna "Yalnızca Mermaid kod bloğunu çıktıla. Mermaid diyagramını işleme." talimatını ekle.

Ask modunda, sohbet giriş alanına aşağıdaki promptu gir:

@booking_system_backend/models.py'deki veri modellerini ve @booking_system_inventory_hold_service/src/main/java/com/galaxium/holdservice/domain'deki Java domain sınıflarını analiz et.

Tüm sınıfları, özelliklerini, metotlarını (varsa) ve aralarındaki ilişkileri gösteren bir Mermaid classDiagram oluştur. 
BookingStatus enum'unu dahil et.

Mermaid işaretlemesini çıktıla. Mermaid diyagramını işleme.

Bob her iki dosyayı da okur ve aşağıdakine benzer diyagram işaretlemesi üretir:

classDiagram
    direction LR

    %% ── Python / SQLAlchemy (booking_system_backend/models.py) ──────────

    class User {
        +int user_id PK
        +str name
        +str email
    }

    class Flight {
        +int flight_id PK
        +str origin
        +str destination
        +str departure_time
        +str arrival_time
        +int base_price
        +int economy_seats_available
        +int business_seats_available
        +int galaxium_seats_available
    }

    class Booking {
        +int booking_id PK
        +int user_id FK
        +int flight_id FK
        +str status
        +str booking_time
        +str seat_class
        +int price_paid
    }

    class BookingStatus {
        <<enumeration>>
        BOOKED = "booked"
        CANCELLED = "cancelled"
        CANCELED = "cancelled"
        COMPLETED = "completed"
    }

    %% ── Java / JPA (holdservice/domain) ────────────────────────────────

    class Quote {
        +String quoteId PK
        +Integer flightId
        +String seatClass
        +Integer quantity
        +Integer travelerId
        +String travelerName
        +Long pricePerSeat
        +Long totalPrice
        +Instant expiresAt
        +QuoteStatus status
        +Instant createdAt
        #onCreate() void
    }

    class QuoteStatus {
        <<enumeration>>
        CREATED
    }

    class Hold {
        +String holdId PK
        +String quoteId FK
        +HoldStatus status
        +Instant reservedUntil
        +String externalBookingReference
        +String errorMessage
        +Instant createdAt
        +Instant updatedAt
        #onCreate() void
        #onUpdate() void
    }

    class HoldStatus {
        <<enumeration>>
        HELD
        EXPIRED
        CONFIRMED
        RELEASED
        CONFIRMATION_FAILED
    }

    class AuditEvent {
        +String eventId PK
        +String entityType
        +String entityId
        +String eventType
        +String details
        +Instant createdAt
        #onCreate() void
    }

    %% ── Relationships ───────────────────────────────────────────────────

    User        "1" --> "0..*" Booking      : places
    Flight      "1" --> "0..*" Booking      : booked on
    Booking          ..>        BookingStatus : status

    Quote       "1" --> "0..*" Hold         : generates
    Quote            ..>        QuoteStatus  : status
    Hold             ..>        HoldStatus   : status

    AuditEvent       ..>        Quote        : references entityId
    AuditEvent       ..>        Hold         : references entityId

Sıra diyagramı oluştur

Bir sıra diyagramı, bileşenlerin belirli bir akışta çalışma zamanında nasıl etkileşime girdiğini zamana göre sıralanmış olarak gösterir. Galaxium Travels rezervasyon akışı React frontend'i, Python FastAPI backend'i ve Java envanter tutma servisini kapsar.

Tam rezervasyon akışını izlemek ve bir Mermaid sequenceDiagram üretmek için bir prompt oluştur. Bob'un analiz etmesi için ilgili dosyaları belirtmek için bağlam bahislerini kullan. Promptunda hangi dosyaları analiz edeceğin ve hangi akışı diyagramlaştırmak istediğin konusunda ne kadar spesifik olursan, çıktı o kadar doğru olur.

Ask modunda, sohbet giriş alanına aşağıdaki promptu gir:

@booking_system_frontend/src/services, @booking_system_backend/server.py, @booking_system_backend/services/booking.py ve @booking_system_inventory_hold_service/src/main/java/com/galaxium/holdservice/api'deki rezervasyon akışını analiz et.

Java servisi ile teklif ve tutma adımları dahil olmak üzere bir kullanıcının uçuş rezervasyonu yapması için tam akışı gösteren bir Mermaid sequenceDiagram oluştur.

Mermaid işaretlemesini çıktıla. Mermaid diyagramını işleme.

Bob etkileşim zincirini izler ve aşağıdakine benzer diyagram işaretlemesi üretir:

sequenceDiagram
    autonumber
    participant U  as User (Browser)
    participant FE as Frontend<br/>(api.ts)
    participant PY as Python Backend<br/>(server.py)
    participant BS as BookingService<br/>(booking.py)
    participant QC as QuoteController<br/>(Java)
    participant QS as QuoteService<br/>(Java)
    participant HC as HoldController<br/>(Java)
    participant HS as HoldService<br/>(Java)
    participant DB as Python SQLite
    participant JDB as Java SQLite

    Note over U,JDB: ── Phase 1: Create Quote ──────────────────────────────────

    U->>FE: createQuote({ flightId, seatClass,<br/>quantity, travelerId, travelerName })
    FE->>PY: POST /quotes
    PY->>QC: POST /api/v1/quotes
    QC->>QS: createQuote(request)
    QS->>QS: generateQuoteId() → "Q-2025-000001"
    QS->>QS: pricingService.calculatePrice(flightId, seatClass)
    QS->>JDB: save Quote (status=CREATED, expiresAt=+24h)
    QS->>JDB: save AuditEvent (QUOTE / CREATED)
    QC-->>PY: 201 Quote
    Note right of PY: Returns {"error":"..."} HTTP 200<br/>if Java service unreachable
    PY-->>FE: Quote JSON
    FE->>FE: assertNotProxyError(response.data)
    FE-->>U: quoteId

    Note over U,JDB: ── Phase 2: Create Hold ───────────────────────────────────

    U->>FE: createHold(quoteId)
    FE->>PY: POST /quotes/{quoteId}/holds
    PY->>HC: POST /api/v1/quotes/{quoteId}/holds
    HC->>HS: createHold(quoteId)
    HS->>JDB: findById(quoteId)
    JDB-->>HS: Quote
    HS->>HS: check quote not expired
    HS->>HS: generateHoldId() → "H-2025-000001"
    HS->>JDB: save Hold (status=HELD,<br/>reservedUntil=+15min)
    HS->>JDB: save AuditEvent (HOLD / CREATED)
    HC-->>PY: 201 Hold
    PY-->>FE: Hold JSON
    FE->>FE: assertNotProxyError(response.data)
    FE-->>U: holdId

    Note over U,JDB: ── Phase 3: Confirm Hold → Create Booking ─────────────────

    U->>FE: confirmHold(holdId)
    FE->>PY: POST /holds/{holdId}/confirm
    PY->>HC: POST /api/v1/holds/{holdId}/confirm
    HC->>HS: confirmHold(holdId)
    HS->>JDB: findById(holdId)
    JDB-->>HS: Hold
    HS->>HS: check status == HELD
    HS->>HS: check reservedUntil not passed
    HS->>JDB: findById(hold.quoteId)
    JDB-->>HS: Quote

    HS->>PY: POST /internal/bookings/from-hold<br/>{ travelerId, travelerName, flightId, seatClass }
    PY->>BS: book_flight(db, user_id, name,<br/>flight_id, seat_class)
    BS->>DB: query Flight (check seats available)
    BS->>DB: query User (validate user_id + name match)
    BS->>DB: decrement {seat_class}_seats_available
    BS->>DB: insert Booking (status="booked")
    DB-->>BS: Booking row
    BS-->>PY: BookingOut

    alt booking succeeded
        PY-->>HS: 200 { booking_id, ... }
        HS->>JDB: update Hold (status=CONFIRMED,<br/>externalBookingReference=booking_id)
        HS->>JDB: save AuditEvent (HOLD / CONFIRMED)
        HC-->>PY: 200 Hold (CONFIRMED)
        PY-->>FE: Hold JSON
        FE->>FE: assertNotProxyError(response.data)
        FE-->>U: Booking confirmed ✓
    else booking failed (name mismatch / no seats / user not found)
        PY-->>HS: 400 { error, error_code, details }
        HS->>JDB: update Hold (status=CONFIRMATION_FAILED,<br/>errorMessage=...)
        HS->>JDB: save AuditEvent (HOLD / CONFIRMATION_FAILED)
        HC-->>PY: 400 Bad Request
        PY-->>FE: error response
        FE-->>U: Error shown to user ✗
    end

Kullanım durumu diyagramı oluştur

Bir kullanım durumu diyagramı, bir sistemdeki aktörleri ve her aktörün kullanabileceği yetenekleri tanımlar. Mermaid'in yerel bir kullanım durumu diyagram türü yoktur, bu nedenle bunu kullanım durumlarını aktöre göre gruplandıran bir flowchart LR ile temsil edersin.

Tüm uygulama genelinde tüm aktörleri ve kullanım durumlarını tanımlamak için bir prompt oluştur. Aktörler kullanıcı türlerini ve harici sistemleri içerir. Bob'un analiz etmesi için ilgili dosyaları belirtmek için bağlam bahislerini kullan; frontend sayfaları, backend REST endpoint'leri ve MCP araçları dahil. Promptunda hangi dosyaları analiz edeceğin konusunda ne kadar spesifik olursan, çıktı o kadar doğru olur. Ayrıca, Mermaid işleyicisinin süslü parantezleri şablon sözdizimi olarak yorumlamaya çalışmaması için Bob'a Mermaid işaretlemesinde süslü parantezleri kaçırmasını söyle.

Ask modunda, sohbet giriş alanına aşağıdaki promptu gir:

Tam Galaxium Travels uygulamasını analiz et. 

Frontend sayfaları, backend REST endpoint'leri ve MCP araçlarına dayalı olarak tüm aktörleri (kullanıcı türleri veya harici sistemler) ve her aktörün gerçekleştirebileceği kullanım durumlarını tanımla.

Bunu bir kullanım durumu diyagramı olarak temsil eden, alt grafikler kullanarak kullanım durumlarını ilgili aktörleri altında gruplandıran bir Mermaid flowchart LR oluştur.

Mermaid işleyicisinin süslü parantezleri şablon sözdizimi olarak yorumlamaya çalışmaması için Mermaid işaretlemesinde süslü parantezleri kaçır.

Mermaid işaretlemesini çıktıla. Mermaid diyagramını işleme.

Bob uygulamayı analiz eder ve aşağıdakine benzer diyagram işaretlemesi üretir:

flowchart LR

    subgraph Traveller["👤 Traveller (Browser)"]
        T1[Browse available flights]
        T2[Search flights by origin / destination]
        T3[Filter flights by date, price, seat class,\nduration, route category, time period]
        T4[Register account]
        T5[Sign in with name and email]
        T6[Select seat class\neconomy / business / galaxium]
        T7[Get price quote]
        T8[Place seat hold - 15-minute timer]
        T9[Confirm hold and create booking]
        T10[Release hold]
        T11[View active bookings]
        T12[View past bookings]
        T13[Cancel booking]
        T14[View pending holds with countdown]
        T15[Dismiss expired hold]
    end

    subgraph AIAgent["🤖 AI Agent (MCP Client)"]
        A1[list_flights]
        A2[register_user]
        A3[get_user_id]
        A4[book_flight]
        A5[get_bookings]
        A6[cancel_booking]
    end

    subgraph JavaService["☕ Java Hold Service\n(Internal System)"]
        J1[Confirm hold via POST /internal/bookings/from-hold]
        J2[Auto-expire holds after timeout]
    end

    subgraph RestAPI["🐍 Python REST API\n(External Consumers / Swagger)"]
        R1[GET  /flights — list and filter flights]
        R2[POST /register — register user]
        R3[GET  /user — look up user by name and email]
        R4[POST /book — book a flight]
        R5[GET  /bookings/&#123;user_id&#125; — get user bookings]
        R6[POST /cancel/&#123;booking_id&#125; — cancel booking]
        R7[POST /quotes — create quote proxy]
        R8[GET  /quotes/&#123;id&#125; — get quote proxy]
        R9[POST /quotes/&#123;id&#125;/holds — create hold proxy]
        R10[GET  /holds/&#123;id&#125; — get hold proxy]
        R11[POST /holds/&#123;id&#125;/confirm — confirm hold proxy]
        R12[POST /holds/&#123;id&#125;/release — release hold proxy]
        R13[GET  / — health check]
    end

    Traveller   -->|uses frontend which calls| RestAPI
    AIAgent     -->|MCP over HTTP at /mcp| RestAPI
    JavaService -->|calls back via internal endpoint| RestAPI

Diyagramları depoya kaydet

Bob'u Agent moduna geç ve oluşturduğun diyagramları depoya kaydetmesini iste. Her diyagram yeni bir docs/architecture/ klasöründe Markdown dosyası olarak kaydedilir.

Agent moduna geç

Mod seçicide Agent'ı seç veya sohbet giriş alanına /agent yaz.

Üç diyagramı da kaydet

Bob'dan mimari dokümantasyon dosyalarını oluşturmasını iste.

Depo kökünde bir docs/architecture/ klasörü oluştur.

Oluşturduğumuz üç diyagramın her birini ayrı Markdown dosyaları olarak kaydet:
- class-diagram.md — UML sınıf diyagramı
- sequence-diagram.md — rezervasyon akışı sıra diyagramı
- use-case-diagram.md — kullanım durumu akış diyagramı

Her dosya kısa bir başlık, oluşturduğumuz Mermaid kod bloğu ve diyagramın kısa bir açıklamasını içermelidir.

Bob üç dosyayı oluşturur. Bob'un yazdığı her dosya için Approve ve Save'e tıkla.

Çıktıyı doğrula

Mermaid çitle çevrili kod bloklarının mevcut olduğunu doğrulamak için Bob dosya gezgininde her dosyayı aç. Diyagramları doğrulamak için şu seçeneklerin var:

  • Bob'dan Markdown dosyasının önizlemesini göstermesini iste.

    Sohbet giriş alanına aşağıdaki promptu gir:

      Bana docs/architecture/class-diagram.md'nin önizlemesini göster

    Bob, Mermaid diyagramı dahil Markdown dosyasını sohbet arayüzünde işler. İşlenmiş diyagrama tıklayarak daha büyük bir görünümde aç.

    Tüm diyagramları işlenmiş olarak görmek için üç dosyanın her biri için bunu yapabilirsin.

  • İşlenmiş diyagramı önizlemek için diyagram işaretlemesini Mermaid Live Editor'a yapıştır.

  • Değişiklikleri bir GitHub deposuna commit et ve push et. Ardından işlenmiş diyagramları görmek için dosyaları GitHub'da görüntüle.

Sorun giderme

Bob derlenmeyen Mermaid işaretlemesi oluşturuyor

Mermaid'in ayrıştırıcısı katıdır. Tek bir geçersiz karakter, desteklenmeyen bir anahtar kelime veya eksik bir satır sonu bile bir diyagramın sessizce başarısız olmasına veya bir ayrıştırma hatası oluşturmasına neden olabilir. Sorunu teşhis etmek ve düzeltmek için aşağıdaki yaklaşımı kullan.

Başarısız satırı tanımla

Bob bir ayrıştırma hatası ürettiğinde, çıktı satır numarasını ve sorunlu kodun bir parçasını içerir.

Bob bir ayrıştırıcı hatası çıktılamazsa, işaretlemeyi Mermaid Live Editor'a yapıştır. Editör sorunlu satırı vurgular ve ayrıştırıcı hatasını gösterir, bu da sorunu tanımlamana yardımcı olabilir.

Etiketlerdeki kaçırılmamış özel karakterler, kapatılmamış alt grafikler veya oklardaki sözdizimi hataları gibi yaygın sorunlar için işaretlemeyi görsel olarak da inceleyebilirsin.

BelirtiOlası nedenÇözüm
{ veya } yakınında ayrıştırma hatasıflowchart veya classDiagram düğüm etiketlerinde kaçırılmamış süslü parantezler{'i &#123; ve }'i &#125; ile değiştir veya etiketi yeniden ifade et
( veya ) yakınında ayrıştırma hatasıDüğüm ID'sinde parantezlerEtiketi tırnak içine al: A["label (note)"]
Beklenmeyen end veya subgraph hatasıKapatılmamış alt grafikHer subgraph bloğunun eşleşen bir end'i olduğundan emin ol
Tanınmayan ok türüDiyagram türü için yanlış ok sözdizimi--> flowchart içindir; classDiagram -->, ..>, --|> vb. kullanır; sequenceDiagram ->>, -->> kullanır
Düğüm tanımlanmış ancak bağlı değilYetim düğüm hata oluşturmaz ancak bazı işleyicileri karıştırabilirDüğümü bağla veya kaldır
Diyagram kısmen işlenir sonra dururEtiket çıplak bir " karakteri içeriyorEtiketlerin içindeki tırnakları kaçır: A["it\'s a label"]

Bob'dan sorunu düzeltmesini iste

Bob'a ayrıştırıcı hatasını ve başarısız satırı ver. Ardından Bob'dan belirli satırları düzeltmesini iste.

Örneğin:

Mermaid classDiagram bu hatayla ayrıştırılamıyor:
Parse error on line 42: ...unexpected token 'NEWLINE'

İlgili blok şu:
    Booking ..> BookingStatus : status (active)

Diyagram yapısını değiştirmeden derlenecek şekilde sözdizimini düzelt.

Bob, zaten incelediğin içeriği yeniden oluşturmadan dar bir düzeltmeyi hedefleyebilir.

Bob'dan çıktılamadan önce doğrulamasını iste

Bir diyagramı sıfırdan yeniden oluşturuyorsan, prompta açık bir doğrulama talimatı ekle:

Mermaid bloğunu çıktılamadan önce, zihinsel olarak ayrıştır ve her düğüm ID'sinin geçerli olduğunu, her alt grafiğin kapatıldığını ve etiketlerdeki tüm özel karakterlerin kaçırıldığını doğrula.

Diyagram büyük olduğunda kapsamı daralt

Birçok düğümü olan bir diyagram geçersiz işaretleme üretmeye devam ediyorsa, Bob'dan önce Python modellerini, sonra Java modellerini gibi bölümler halinde oluşturmasını iste. Ardından Bob'dan blokları birleştirmesini iste. Daha küçük oluşturmalar Bob'un doğrulaması ve senin karşılaştırman için daha kolaydır.

Sonraki adımlar

Bu eğitimde, Galaxium Travels kod tabanını keşfetmek ve Bob ile üç tür mimari diyagram oluşturmak için bağlam bahislerini ve Ask modunu kullandın, ardından bunları depoya kaydetmek için Agent modunu kullandın. Aşağıdaki kaynaklarla devam et:

Bu konu nasıl?