---
url: https://docs.ogmabox.com/th/development/architecture.md
description: >-
  ทำความเข้าใจสถาปัตยกรรมของ Ogma ทั้งแบ็กเอนด์ Rust, ฟรอนต์เอนด์ Vue, เชลล์
  Electron, ที่เก็บข้อมูลภายในเครื่อง, รันไทม์ปลั๊กอิน, เซิร์ฟเวอร์ MCP
  และการจัดแพ็กเกจแอปเดสก์ท็อป
---

# สถาปัตยกรรม {#architecture}

Ogma สร้างขึ้นเป็นแอปเดสก์ท็อปที่ทำงานภายในเครื่อง โดยประกอบด้วยแบ็กเอนด์ Rust, ฟรอนต์เอนด์ Vue, เชลล์ Electron, ที่เก็บข้อมูลโครงการภายในเครื่อง, รันไทม์ปลั๊กอิน และการผสานรวม MCP ที่เลือกใช้ได้

## องค์ประกอบหลัก {#high-level-components}

| องค์ประกอบ | ตำแหน่ง | หน้าที่ |
| --- | --- | --- |
| แบ็กเอนด์พร็อกซี/API ที่ใช้ Rust | `crates/proxy` | พร็อกซี MITM, REST API, ที่เก็บข้อมูล, เครื่องมือสแกน, การส่งซ้ำ, ระบบอัตโนมัติ, ปลั๊กอิน, MCP, OAST และเอนด์พอยต์ควบคุมเบราว์เซอร์ |
| ฟรอนต์เอนด์ Vue | `frontend/src` | UI พื้นที่ทำงาน, ที่เก็บสถานะ, เส้นทาง, ตัวแก้ไข, เครื่องมือสแกน, iframe ของปลั๊กอิน, พื้นที่ทำงาน AI และเครื่องมืออรรถประโยชน์ |
| เชลล์เดสก์ท็อป Electron | `desktop` | แอปเดสก์ท็อปที่จัดแพ็กเกจแล้ว, การผสานรวมหน้าต่างเบราว์เซอร์, บริดจ์การตั้งค่า และวงจรชีวิตแอป |
| เอกสาร | `docs` | เว็บไซต์เอกสาร VitePress |
| ไดเรกทอรีข้อมูล | `ogma-data` หรือตำแหน่งข้อมูลแอปของแพลตฟอร์ม | ฐานข้อมูล SQLite, ข้อมูลของ CA, ปลั๊กอิน, รายการส่งออก, ข้อมูลสำรอง และไฟล์ |

## แบ็กเอนด์ {#backend}

แบ็กเอนด์ให้บริการ REST API และตัวรับการเชื่อมต่อพร็อกซี โมดูลหลักของแบ็กเอนด์ประกอบด้วย:

* `proxy_server.rs`: การดักรับและส่งต่อ HTTP
* `intercept.rs` และ `intercept_rules.rs`: คิวดักรับและการจับคู่
* `store.rs` และ `store_actor.rs`: การเข้าถึงฐานข้อมูลโครงการและแฮนเดิลที่เก็บข้อมูลแบบอะซิงโครนัส
* `api.rs`: การกำหนดเส้นทาง API และตัวจัดการ
* `replay.rs`, `automate.rs` และ `workflows.rs`: การดำเนินการคำขอที่ทำซ้ำได้
* `passive_scanner.rs` และ `active_scanner.rs`: เอนจินเครื่องมือสแกน
* `plugins.rs` และ `plugin_runtime.rs`: เมทาดาทาของปลั๊กอิน, รันไทม์แซนด์บ็อกซ์, สิทธิ์ และเหตุการณ์
* `mcp.rs`: ทรัพยากรและเครื่องมือ MCP
* `ca.rs`, `tls_cert.rs`, `client_cert.rs`: การรองรับใบรับรองและ TLS
* `ws_history.rs`, `ws_replay.rs` และ `sse.rs`: การรองรับทราฟฟิกแบบสตรีม
* `oast.rs`: บริการรับการเรียกกลับนอกแบนด์

## ฟรอนต์เอนด์ {#frontend}

ฟรอนต์เอนด์เป็นแอป Vue ที่ใช้การโหลดเมื่อจำเป็นในระดับเส้นทางสำหรับมุมมองพื้นที่ทำงานส่วนใหญ่

ส่วนสำคัญ:

* `router/index.ts`: เส้นทางพื้นที่ทำงานและเส้นทางการตั้งค่า
* `components/NavSidebar.vue`: การนำทางหลักของผลิตภัณฑ์
* `stores/*`: ที่เก็บสถานะ Pinia สำหรับประวัติ, การส่งซ้ำ, ระบบอัตโนมัติ, ประเด็นที่ตรวจพบ, เวิร์กโฟลว์, ปลั๊กอิน, ขอบเขต, เชลล์, AI และสถานะอื่น ๆ
* `api/client.ts` และ `api/types.ts`: อินเทอร์เฟซไคลเอนต์ API ที่กำหนดชนิดข้อมูล
* `views/*`: หน้าฟีเจอร์ของพื้นที่ทำงาน
* `components/WorkspacePanel.vue`: แผงพื้นที่ทำงาน AI และเชลล์เชื่อมต่อกลับ
* `views/PluginsView.vue` และ `views/PluginPageView.vue`: การติดตั้งและจัดการปลั๊กอิน รวมถึงการโฮสต์ iframe ของฟรอนต์เอนด์

## เชลล์เดสก์ท็อป {#desktop-shell}

เชลล์ Electron มอบประสบการณ์เดสก์ท็อปที่จัดแพ็กเกจแล้วและฟังก์ชันบริดจ์ที่เชื่อมกับความสามารถดั้งเดิมของระบบ:

* เปิดและควบคุมหน้าต่างแอป
* บันทึกการตั้งค่าเดสก์ท็อปอย่างถาวรในที่เก็บข้อมูลภายในเครื่องของฟรอนต์เอนด์
* เปิดหน้าต่าง Ogma Browser และมุมมองเบราว์เซอร์ที่ฝังไว้
* จัดแพ็กเกจแอสเซ็ตและไฟล์ไบนารีเพื่อแจกจ่ายบนเดสก์ท็อป

## โมเดลการจัดเก็บข้อมูล {#storage-model}

Ogma เก็บข้อมูลการประเมินไว้ภายในเครื่อง การย้ายโครงสร้างฐานข้อมูลของแบ็กเอนด์กำหนดตารางแยกตามโครงการสำหรับ:

* ประวัติ HTTP และเนื้อหาข้อความ
* ทราฟฟิก WebSocket และ SSE
* เซสชันและรายการส่งซ้ำ
* เซสชัน การรัน และผลลัพธ์ของระบบอัตโนมัติ
* ประเด็นที่ตรวจพบและลิงก์หลักฐาน
* เวิร์กโฟลว์และการรันเวิร์กโฟลว์
* ค่าขอบเขตที่ตั้งไว้ล่วงหน้า
* ปลั๊กอินและสิทธิ์ของปลั๊กอิน
* ไฟล์, รายการส่งออก, ข้อมูลสำรอง และการตั้งค่า

## รันไทม์ปลั๊กอิน {#plugin-runtime}

ปลั๊กอินสามารถมีองค์ประกอบแบ็กเอนด์ องค์ประกอบฟรอนต์เอนด์ หรือทั้งสองอย่าง

ปลั๊กอินแบ็กเอนด์ทำงานในแซนด์บ็อกซ์ JavaScript และรับออบเจ็กต์ `sdk` ส่วนปลั๊กอินฟรอนต์เอนด์ทำงานใน iframe ที่อยู่ในแซนด์บ็อกซ์และสื่อสารผ่านบริดจ์ที่ Ogma ควบคุม

ขอบเขตที่สำคัญ:

* ปลั๊กอินฟรอนต์เอนด์ไม่สามารถเข้าถึง DOM ของหน้าหลักที่ครอบ iframe ได้
* คำสั่งบริดจ์ได้รับการตรวจสอบฝั่งเซิร์ฟเวอร์
* การกระทำฝั่งแบ็กเอนด์ที่มีการป้องกันต้องใช้สิทธิ์ที่ประกาศและได้รับอนุมัติแล้ว
* แพ็กเกจที่ติดตั้งจะถูกคัดลอกไปยังไดเรกทอรีปลั๊กอินที่ Ogma จัดการ เพื่อให้การทำงานขณะรันมีเสถียรภาพ

ดู [ระบบปลั๊กอิน](../plugins/README.md)

## การผสานรวม MCP {#mcp-integration}

เซิร์ฟเวอร์ MCP เปิดให้ผู้ช่วยภายนอกเข้าถึงบริบทโครงการของ Ogma โดยเริ่มทำงานในโหมดอ่านอย่างเดียวตามค่าเริ่มต้น ความสามารถในการเขียน ส่งออก ส่งคำขอ รันเวิร์กโฟลว์ และควบคุมการดักรับต้องได้รับสิทธิ์อย่างชัดเจน

ดู [การตั้งค่า MCP](../mcp-setup.md)

## หลักการออกแบบ {#design-principles}

* ให้ความสำคัญกับการทำงานภายในเครื่องเป็นค่าเริ่มต้น
* ประเด็นที่ตรวจพบเชื่อมโยงกับหลักฐาน
* กำหนดขอบเขตก่อนใช้ระบบอัตโนมัติ
* ต้องได้รับสิทธิ์อย่างชัดเจนสำหรับ AI, ปลั๊กอิน, การส่งคำขอ และการส่งออก
* การนำทางที่รวดเร็วสำหรับเวิร์กโฟลว์ที่ผู้ทดสอบใช้ซ้ำ
* รองรับเวิร์กโฟลว์พร็อกซีที่ใช้งานกันอยู่ พร้อมรักษาความสามารถในการขยาย Ogma