# Plugin Structure

The CyberOcean Framework's Plugin System is a core component of its architecture, designed to enhance flexibility and extensibility. This system allows developers to create and integrate custom plugins, each encapsulating specific functionalities and features. In this section, we will explore the fundamental aspects of the Plugin System.

# Overview

The Plugin System in the CyberOcean Framework is designed to simplify the addition of custom features and functionalities to your applications. It operates on a modular approach, allowing for the isolation of different application aspects into self-contained units (plugins). This modularity not only facilitates easier development and maintenance but also promotes reusability and scalability.

# Structure of a Plugin

Each plugin in the CyberOcean Framework follows a specific directory and file structure, which is crucial for its seamless integration and functioning within the system. Here's a breakdown of this structure:

# Root Directory

The root directory of a plugin contains essential configuration files:

  • plugin.jsonc: This file holds the basic information about the plugin, including its name, key, version, and other metadata. This information is used by the framework to identify and manage the plugin.

  • kha-plugin-config.jsonc: It contains the CyberOcean's specific configuration settings for the plugin, such as the URL, authentication token, and other relevant parameters necessary for the plugin's interaction with the CyberOcean ecosystem.

# Key Directories and Files

The plugin's functionality is divided across several directories, each serving a specific purpose:

  1. adminUI Directory: This is the heart of the plugin's front-end. It includes:

    • Components: Reusable Vue.js components.
    • Pages: Individual pages of the admin UI.
    • Partials: Reusable HTML fragments.
    • Public Pages: Pages accessible without authentication.
    • Scripts: JavaScript files driving the admin UI.
    • Utils: Utility functions and modules.
    • Config Files: config.jsonc for UI settings and menus.jsonc for defining navigation menus.
    • Store: store.js for managing the Vuex store.
  2. api Directory: This directory caters to the back-end functionalities:

    • Controllers: To handle API requests.
    • Routes: routes.js maps URLs to controllers.
    • Socket.io: io.js for real-time web socket communication.
  3. config Directory: Contains configurations for database and settings:

    • Models: Representations of database entities.
    • Database Configurations: Including hooks, models, and initial seed data (seed.jsonc).
    • Application Settings: data.jsonc for key/value pairs and schema.jsonc for defining the settings schema.
  4. locales Directory: Houses translation files for multiple languages, enabling internationalization.

  5. static Directory: Contains public files and resources used across the project.