# Mac ## Example of organizing a working directory ``` MikoPBX ├── Core │   ├── ... │   └── ... ├── Extensions │   ├── ModuleBackup │   └── ModuleYourModule └── MikoPBXUtils    └──node_modules ``` * **Core** - files from the repository [mikopbx/Core](https://github.com/mikopbx/Core) * **Extensions** - directory for storing module files * **ModuleBackup** - files from the repository[ mikopbx/ModuleBackup](https://github.com/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. ```bash # 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 php@7.4 brew unlink php && brew link --overwrite --force php@7.4 ``` 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`: {% code title="babel.config.json" %} ```json { "presets": [["airbnb", { "targets": { "chrome": 50, "ie": 11, "firefox": 45 } }]] } ``` {% endcode %} In MikoPBXUtils dir create file `package.json`: {% code title="package.json" %} ```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" } } ``` {% endcode %} Install all from package.json file ```bash npm install ``` {% hint style="info" %} 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!). {% endhint %} ### 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](https://github.com/mikopbx/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`](https://github.com/mikopbx/ExtensionsDevTools/blob/master/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 ``` {% hint style="info" %} The name of the new module must begin with 'Module' {% endhint %} ### 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](https://www.jetbrains.com/phpstorm/) and install it. Create a new **PHP empty Project from** existing sources. ![](https://2923143221-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPK9hhxZA8ODTjLfJ9l%2Fuploads%2FRQwif2ECwdEjLPBioFfI%2FProjectMac.jpg?alt=media\&token=3ca4a88d-aed7-47dc-a4f2-ca419a844f9f) Setup the **composer** executable path according to this [manual](https://www.jetbrains.com/help/phpstorm/composer-page.html). Setup the **PHP** interpreter path according to this [manual](https://www.jetbrains.com/help/phpstorm/configuring-local-interpreter.html). ### 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` ![](https://2923143221-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPK9hhxZA8ODTjLfJ9l%2Fuploads%2FgBjezlaXcAPm1sxE2jGN%2FBabelCoreMac.jpg?alt=media\&token=54b221ad-51fe-4821-a826-1c5b30f29f76) ![](https://2923143221-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPK9hhxZA8ODTjLfJ9l%2Fuploads%2FVxlliVd8pPwudpApTtdS%2FScopeCoreMac.jpg?alt=media\&token=c3b6bf75-d18d-4915-929b-a193ec32190e) 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` ![](https://2923143221-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPK9hhxZA8ODTjLfJ9l%2Fuploads%2F5mZrvCdoB68MFu55uxdl%2FBabelModulesMac.jpg?alt=media\&token=aa8494e9-2cad-45f5-92fd-2dd1dc56ca56) ![](https://2923143221-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPK9hhxZA8ODTjLfJ9l%2Fuploads%2Fef0YQrHj1Bj3YCiUmO6Y%2FScopeModulesMac.jpg?alt=media\&token=97839516-25e3-4bd1-ae08-6139127aace1) ### PHPStorm: setup Phalcon 1. Go to `Settings / Plugins` 2. Search "Phalcon" and install it ![](https://2923143221-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPK9hhxZA8ODTjLfJ9l%2Fuploads%2Fv1Z8A1OPqK2IlJ4jlhDf%2FPhalconMac.jpg?alt=media\&token=1419b79e-97df-4e4e-8d8d-45b58954f45e)