Mac

How to organize workspace for MikoPBX extension developement.
Example of organizing a working directory
MikoPBX
├── Core
│   ├── ...
│   └── ...
├── Extensions
│   ├── ModuleBackup
│   └── ModuleYourModule
└── MikoPBXUtils
    └──node_modules
Core - files from the repository mikopbx/Core​
Extensions - directory for storing module files
ModuleBackup - files from the repository mikopbx/ModuleBackup​
ModuleYourModule - directory with files of your module
MikoPBXUtils - directory with external tools  
node_modules - node-js modules
Environment
We widely use the composer to manage dependents libraries, NodeJS runtime for Javascript code processing.
# XCode Command Line Tools
xcode-select --install
​
# Install Homebrew
/bin/bash -c "$(curl -fsSL https://git.io/JIY6g)"
​
# Install Composer
brew install composer
​
# Install php 7.4
brew install [email protected]
brew unlink php && brew link --overwrite --force [email protected]
Install babel files to be able to convert JS files
# Install Node package manager
brew install node
​
# Create DIR for example MikoPBX/MikoPBXUtils, enter to it
In MikoPBXUtils dir create file babel.config.json:
babel.config.json
{
  "presets": [["airbnb", {
    "targets": {
      "chrome": 50,
      "ie": 11,
      "firefox": 45
    }
  }]]
}
In MikoPBXUtils dir create file package.json:
package.json
{
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.14.2",
    "babel-preset-airbnb": "^5.0.0",
    "eslint": "^7.27.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.23.3"
  }
}
Install all from package.json file
npm install
At this point, I strongly recommend closing ALL your terminal tabs and windows. This will mean opening a new terminal to continue with the next step. This is strongly recommended because some really strange path issues can arise with existing terminals (trust me, I have seen it!).
Clone the Core MikoPBX repository
Use GIT command to make similar to picture folder sctructure with MikoPBX sources.
MikoPBX
├── Core <- Clone https://github.com/mikopbx/Core.git here
├── Extensions
└── MikoPBXUtils
Install third party PHP libraries to MikoPBX/Core folder
cd MikoPBX/Core
composer install --ignore-platform-reqs 
Create a new module structure
To create a new module for MikoPBX, you can use the ModuleTemplate repository as ready for use template.
Every MikoPBX module must have a unique identifier, i.e. you are developing a call back module with the identifier – ModuleYourModule
MikoPBX
├── Core 
├── Extensions
│   └── ModuleYourModule
└── MikoPBXUtils
Сopy the script create_module.sh to the Extensions dir and run it. It clones the ModuleTemplate repository and renames folders, files, namespaces and class names according to the new module unique id – ModuleYourModule.
cd MikoPBX/Extensions
sh create_module.sh ModuleMyNewMod
The name of the new module must begin with 'Module'
PHPStorm IDE
We advise using PHPStorm IDE because all MikoPBX code was written with this tool.
You have to download it by the next link and install it.
Create a new PHP empty Project from existing sources.
Setup the composer executable path according to this manual.
Setup the PHP interpreter path according to this manual.
PHPStorm: setup Babel
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
Babel guarantees that the JS code will work the same in all web browsers.
The source JS files are located in directories:
MikoPBX/Core/sites/admin-cabinet/assets/js/src 
MikoPBX/Extensions/*/public/assets/js/src
Files that the web interface uses are located in directories:
MikoPBX/Core/sites/admin-cabinet/assets/js/pbx
MikoPBX/Extensions/*/public/assets/js
With any modification of the source file, babel must create a final file.
1.Go to  Preferences / Tools / File Watchers
2.Click to "Add" button
3.Choose template "Babel"
4.Set "Name" - Babel Core
5.Set "Program" $ProjectFileDir$/MikoPBXUtils/node_modules/.bin/babel
6.Set "Arguments" $FilePath$ --out-dir $FileParentDir$/../pbx/$FileDirName$ --source-maps inline --presets airbnb 
7.Set "Output path to refresh": $FileParentDir$/../pbx/$FileDirName$/$FileprNameWithoutExtension$.js:$FileParentDir$/../pbx/$FileDirName$/$FileNameWithoutExtension$.js.map 
8.Set "Auto-save edited files to trigger the watcher"
9.Set "Trigger the watcher on external changes" 
10.Set "Working directory": $ProjectFileDir$/MikoPBXUtils
11.Setup "Scope"
12.Set "Name" - Project Core
13.Set "Pattern": file:Core/sites/admin-cabinet/assets/js/src/*.js
1.Go to  Preferences / Tools / File Watchers
2.Click to "Add" button
3.Choose template "Babel"
4.Set "Name" - Babel Modules
5.Set "Program" $ProjectFileDir$/MikoPBXUtils/node_modules/.bin/babel
6.Set "Arguments" $FilePath$ --out-dir $FileParentDir$ --source-maps --presets airbnb 
7.Set "Output path to refresh": $FileParentDir$/$FileNameWithoutExtension$.js:$FileParentDir$/$FileNameWithoutExtension$.js.map 
8.Set "Auto-save edited files to trigger the watcher"
9.Set "Trigger the watcher on external changes" 
10.Set "Working directory": $ProjectFileDir$/MikoPBXUtils
11.Setup "Scope"
12.Set "Name" - Project Modules
13.Set "Pattern":file:Extensions/*/public/assets/js/src/*.js
PHPStorm: setup Phalcon
1.Go to  Settings / Plugins
2.Search "Phalcon" and install it 
Linux
Next - Modules developement
How to start
Last modified 1yr ago