# Development and Contributing > ## `NOTE: This is a work in progress.` You can keep up with development on ## Contributing Everybody is invited and welcome to contribute to the smart mirror. There is a lot to do... If you are not a developer perhaps you would like to: * **Help with the documentation** on [docs.smart-mirror.io](http://docs.smart-mirror.io/), * **Localize the smart mirror** in a new language language (or improve an existing one) * **Helping others** on [Discord](https://discord.gg/EMb4ynW). If you are a developer and have a feature/capability you'd like to see, why not spend a couple of hours and help build it? The process is straight-forward. * Fork the smart mirror [git repository](https://github.com/evancohen/smart-mirror). * create a branch from the dev branch following the following naming convention `initials/feature-name` for example if Evan Cohen was creating a feature he would name the branch `ec/feature-name`. * Write the code for your feature/capability. * Create a Pull Request against the [**dev**](https://github.com/evancohen/smart-mirror/tree/dev) branch of the smart mirror. ## Development See the `dev` branch for features that are actively in development.\ If you would like to contribute please follow the [contribution guidelines](https://github.com/evancohen/smart-mirror/blob/master/CONTRIBUTING.md).\ To launch the mirror with a debug window attached use the following command: ``` npm start dev ``` ### Project Structure The smart mirror is an [Electron](http://electron.atom.io) app, which means it leverages Chromium, Node, and the V8 JavaScript engine to host and render the mirror. #### [app/](https://github.com/evancohen/smart-mirror/tree/master/app) The app directory contains the core of the smart-mirror: * `js/` core js of the smart mirror (bootstrapping angular, etc) * `css/` all of the smart mirror styles * `locales/` all of the localized speech commands (more on this later) * `fonts/` nobody knows what this folder does, but it's somehow necessary ;) #### [plugins/](https://github.com/evancohen/smart-mirror/tree/master/plugins) The plugins directory contains all of the plugins included in the smart mirror. A plugin consists of an optional combination of the following: * `config.schema.json` defines the configuration schema for your plugin. You can look at example schema and test your own at * `index.html` the html partial for your plugin. This will be added to the main [index.html](https://github.com/evancohen/smart-mirror/blob/master/index.html) as part of the new plugin location configuration. * `controller.js` All of the angular controller logic (data binding) for your plugin. This will be added to the main [index.html](https://github.com/evancohen/smart-mirror/blob/master/index.html) as part of the new plugin location configuration. * `service.js` should your plugin need an angular service this will be added to the main [index.html](https://github.com/evancohen/smart-mirror/blob/master/index.html) as part of the new plugin location configuration. * `plugin.css` plugin specific classes for styles * `locales\*.json` - this folder contains the plugin specific translations required for both configuration )the config.schema.json file and plugin runtime (index.html) , \* starting in V 0.28 * a complete sample plugin can be loaded from [here](https://github.com/sdetweil/samplePlugin) #### [remote/](https://github.com/evancohen/smart-mirror/tree/master/remote) The remote directory contains the code that powers the client configuration page(s). The "server" side code can be found in [`remote.js`](https://github.com/evancohen/smart-mirror/blob/master/remote.js). #### [app/locales/](https://github.com/evancohen/smart-mirror/tree/master/app/locales) Within this directory you will find the core `JSON` localization files for the mirror. The mirror uses [i18n](https://angular-translate.github.io/) to `$translate` strings rendered in the mirror (examples of this in `index.html` and `config.json`). When making changes to these files make sure that you add string keys to all localization files, not just to the one that you speak. #### [scripts/](https://github.com/evancohen/smart-mirror/tree/master/scripts) Contains various help scripts. There aren't a ton today and they will expand over time. ### Tips and tricks The dev console is your friend! You can set breakpoints, log messages, and inspect the DOM - just like you would in a regular webdev console. #### Speech Simulation Since speech query limitations have becoming a limeting factor of development I've created a shim for Annyang to "simulate" speech to test the mirror. In the dev console try some of these examples: ```javascript // Play YouTube video annyang.trigger("show me how to tie a bowtie"); // Play a song on SoundCloud annyang.trigger("SoundCloud play Kero One so seductive"); // Display a map annyang.trigger("show me a map of Seattle Washington"); ``` #### Dev Environment I typically wouldn't recommend developing directly on the Pi (unless you are trying to debug a Pi specific issue, in which case, I'm sorry. It's not the fastest thing in the world.) The mirror is compatible with linux and OSX, and developing there will be much nicer. You can plug your mirror into your computer and use it as a second (or third, you lucky duck) monitor. There's some logic in `main.js` that will automatically put the electron app on to your secondary monitor. It is not suggested that you develop on windows, the mirror is incompatible due to limitations of Snowboy. However, you can use a VM with ubuntu on it if you must... However, if u want to use Windows as a development environment, you can you can use the [WinScp](https://winscp.net/eng/index.php) or [bitvise](https://www.bitvise.com/ssh-client) ssh clients to access the PI disk over SSH (make sure to enable it on the pi) and bot tools provide a file manager type view over the PI disk, so you can double click edit with your favorite Windows editor.. For Linux and Mac you can do the same with their file managers or addons. Like [cyberduck for OSX](https://cyberduck.io/) or caja for linux --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.smart-mirror.io/development_and_contributing.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.