Tutorial: Understanding the Structure of CodyChat Addons

This tutorial provides a step-by-step guide to understanding the structure of a CodyChat addon, enabling developers to create their own. It assumes basic knowledge of PHP, JavaScript, HTML, and MySQL, as these are the core technologies used in CodyChat development.

1. Overview of CodyChat Addons

CodyChat addons are modular extensions written primarily in PHP, with optional JavaScript, HTML, and CSS for frontend functionality. They interact with the core platform via hooks and APIs provided by BoomCoding. Addons are typically distributed as ZIP files and installed through the CodyChat admin panel. A well-structured addon follows BoomCoding’s guidelines to ensure compatibility, security, and ease of use.

The basic structure of a CodyChat addon includes:

• A main PHP file for core logic and hooks.
• Optional frontend files (JavaScript, CSS, HTML) for user-facing features.
• A configuration file or database schema for settings.
• Installation and uninstallation scripts for setup.

2. Setting Up Your Development Environment

Before building an addon, set up a local CodyChat instance to test your code:

• Install CodyChat: Download the latest version from https://boomcoding.com/store and set it up on a local server (e.g., XAMPP, WAMP, or MAMP) with PHP 7.4+ and MySQL.
• Access Documentation: Refer to the official CodyChat documentation on codychat.store for API details and hook references.
• Use a Code Editor: Choose a code editor like Visual Studio Code or PHPStorm for syntax highlighting and debugging.

Tip: Test your addon on a clean CodyChat installation to avoid conflicts with other plugins or themes.

3. Basic Addon Structure

A CodyChat addon is typically a folder containing several files, structured as follows:

my_addon/
├── files/
    └── my_addon.js   # JavaScript for frontend functionality
    └── my_addon.css  # CSS for styling
    └── icon.png      # mandatory addon icon
    └── my_addon.php  # mandatory addon file
        
├── language/
    └── Default.php             # Main language file
    └── English.php             # English language file
        
├── system/
    └── action.php             # Main action file
    └── config.php             # Admin panel config file
    └── addons_function.php    # Helper functions
    └── install.php            # Installation script
    └── uninstall.php          # Uninstallation script

├── template/
    └── my_box.php     # Optional template file

Key Files Explained

• my-addon.js: An optional file to load extra js functions
• my-addon.css: An optional file to load all CSS style for the addon
• icon.png: A small image icon for the addon recomended size 80x80
• my-addon.php: This is the main base addon file the addon fronted, code written here it will be loaded at same time as the chat when you open the chat page in the browser
• action.php: The main entry point for the addon. It contains the addon core logic like backend server side.
• install.php: Handles setup tasks, such as creating database tables or adding default settings.
• uninstall.php: Cleans up when the addon is removed, such as deleting tables or settings.
• system/addons_function.php: Stores reusable functions to keep the main file clean.
• system/config.php: The settings page for addon in the admin panel.

4. Creating the backend, The Main Addon File (action.php)

The main PHP file is the heart of your addon. It includes metadata, hooks, and core functionality. Below is an example structure for action.php:

<?php
$load_addons = basename(dirname(dirname(__FILE__)));
require_once('../../../system/config_addons.php');

// Main Function
function helloWorld() {
    return 'Hello World, My First addon';
}

if (isset($_POST['main_box']) && boomAllow($addons['addons_access']) ){
    echo helloWorld();
	die();
}

if (isset($_POST['save_settings']) && canManageAddons()){
    echo save_settings();
	die();
}

?>

Explanation

• boomAllow($addons['addons_access']):  Prevents direct access to the file, ensuring it runs within designed rank in the addons setting.
• canManageAddons():  Prevents direct access to unauthorized users to change addon settings.
• $load_addons:  Provides addon name displayed in the admin panel.
• helloWorld():  do somthing and return response to the user.
• save_settings(): save_settings() Used to save the main addon settings on the addon settings page.

5. Creating Installation and Uninstallation Scripts

install.php

This script runs when the addon is installed. It can create database tables or set default configurations.

<?php
if (!defined('BOOM')) {
    die('Access Denied');
}

$ad = array(
  'name' => basename(dirname(dirname(__FILE__))), # it collect addon name based on addon folder's name
  'access' => 1, # Define addon rank access
  'custom1' => '', # custom fields
  'custom2' => '', # custom fields
  'custom3' => '', # custom fields
  'custom4' => '', # custom fields
  'custom5' => '', # custom fields
  'custom6' => '', # custom fields
  'custom7' => '', # custom fields
  'custom8' => '', # custom fields
  'custom9' => '', # custom fields
  'custom10' => '', # custom fields
);

# create optional table into database
$mysqli->query("
    CREATE TABLE IF NOT EXISTS myaddon_settings (
        id INT AUTO_INCREMENT PRIMARY KEY,
        setting_name VARCHAR(255) NOT NULL,
        setting_value TEXT NOT NULL
    )
");

?>

uninstall.php

This script cleans up when the addon is removed.

<?php
if (!defined('BOOM')) {
    die('Access Denied');
}

// Drop the optional table
$mysqli->query("DROP TABLE IF EXISTS myaddon_settings");
?>

Tip: Always test installation and uninstallation scripts to ensure they don’t disrupt the core CodyChat database.

6. Adding Frontend Assets

JavaScript (my_addon/files/my_addon.php)

Frontend scripts enhance user-facing features, such as adding interactivity to the chat interface.

// Add the client-side functions
 <?php if($addons['addons_access'] == 1){ ?>
<script data-cfasync="false" type=text/javascript> 

  # Your js code here
  
</script>
<?php } ?>
<style><?php require_once('my_addon.css'); ?></style>
<script data-cfasync="false" src="addons/<?php echo $addons['addons']; ?>/files/<?php echo $addons['addons']; ?>.js"></script>

CSS (my_addon/files/my_addon.css)

Styles customize the appearance of your addon’s features.

/* Style */
.custombox {
    color: #2ecc71;
    font-weight: bold;
}

7. Adding Helper Functions (system/addons_function.php)

Keep your main file clean by moving reusable logic to a separate file.

<?php

// The settings function
function save_settings(){
	global $data,$addons,$setting,$mysqli;
	$set_access = escape($_POST['set_access']);
	$mysqli->query("UPDATE boom_addons SET addons_access = '$set_access' WHERE addons = '{$addons['addons']}'");
	redisUpdateAddons($addons['addons']);
	return 1;
}

?>

8. Optional Configuration File (system/config.php)

A config.php file can store metadata or settings for your addon.

<?php
$load_addons = basename(dirname(dirname(__FILE__)));
require_once('../../../system/config_addons.php');
if(!canManageAddons()){
	die();
}
echo elementTitle($addons['addons'], 'loadLob(\'admin/setting_addons.php\');');
?>
<div >
	<div >
	 <div >
		<p ><?php echo $lang['limit_feature']; ?></p>
		<select id="set_addon_access">
			<?php echo listRank($addons['addons_access'], 1); ?>
		</select>
	</div>
	<button onclick="savePrivate_bg();" type=button ><?php echo $lang['save']; ?></button>
		<div >
			<script data-cfasync="false" type=text/javascript>
				savePrivate_bg = function(){
					$.post('addons/<?php echo $load_addons; ?>/system/action.php', {
						set_addon_access: $('#set_addon_access').val()					
						}, function(response) {
							if(response == 1){
								callSuccess(system.saved);
							}
							else{
								callError(system.error);
							}
					});	
				}
			</script>
		</div>
	</div>
</div>

9. Testing and Debugging

• Test Locally: Install your addon via the CodyChat admin panel and test all features (e.g., send a chat message to verify the greeting).
• Check Compatibility: Ensure your addon works with the latest CodyChat version and doesn’t conflict with popular addons like those from blackcorsair.codychat.store.
• Debug Errors: Use PHP error logs and browser developer tools to troubleshoot issues.
• Secure Your Code: Sanitize all inputs (e.g., escape()) to prevent SQL injection or XSS attacks.

10. Packaging and Distribution

To distribute your addon:

• Create a ZIP File: Package the my_addon/ folder into my_addon.zip.
• Write Documentation: Include a README.md with installation instructions and usage examples.
• Distribute Safely: Share your addon through trusted platforms like codychat.store or your own site (e.g., yourname.codychat.store). Avoid unverified marketplaces to prevent scams.

Tip: Follow BlackCorsair’s example by providing clear documentation and support for your addon.

11. Best Practices for CodyChat Addons

• Follow Naming Conventions: Use unique prefixes (e.g., myaddon_) for functions, tables, and classes to avoid conflicts.
• Optimize Performance: Minimize database queries and use caching for frequently accessed data by using redis functions.
• Ensure Compatibility: Test your addon across different CodyChat versions and browsers.
• Provide Updates: Regularly update your addon to support new CodyChat releases and fix bugs.
• Engage with the Community: Share your addon on forums or X to get feedback and build a user base.

Conclusion

Building a CodyChat addon involves creating a well-organized structure with a main PHP file, installation scripts, frontend assets, and helper functions. By following BoomCoding’s guidelines, using hooks effectively, and prioritizing security and performance, you can create addons that enhance the CodyChat experience. Test thoroughly, document clearly, and distribute through trusted channels to establish yourself as a reputable developer. For inspiration, study successful addons from blackcorsair.codychat.store and contribute to the growing CodyChat ecosystem.