Why Gemfury?
Push, build, and install
RubyGems
npm packages
Python packages
Maven artifacts
PHP packages
Go Modules
Bower components
Debian packages
RPM packages
NuGet packages
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>dynamicengine-tools package</title>
<link type="text/css" rel="stylesheet" href="../assets/css/github-markdown.css">
<link type="text/css" rel="stylesheet" href="../assets/css/pilcrow.css">
<link type="text/css" rel="stylesheet" href="../assets/css/hljs-github.min.css"/>
</head>
<body>
<article class="markdown-body"><h1 id="dynamicengine-tools-package"><a class="header-link" href="#dynamicengine-tools-package"></a>dynamicengine-tools package</h1>
<p>The official Dynamic Engine Tools plugin for Atom.</p>
<h2 id="project-management"><a class="header-link" href="#project-management"></a>Project management</h2>
<h3 id="creating-a-new-project"><a class="header-link" href="#creating-a-new-project"></a>Creating a new Project</h3>
<p> To create a new project you can use the "Create New Project..." feature on the plugin menu.
Here you can see the options available for creating a new Cordova project:
<img src="./images/NewProjectCreation.png"></p>
<h3 id="installed-plugin"><a class="header-link" href="#installed-plugin"></a>Installed plugin</h3>
<p> In this view you can see all installed plugin with version and relative link to github/gitlab repo. For uninstall a plugin, click to uninstall button.
<img src="./images/InstalledPlugin.png"></p>
<blockquote>
<p>N.B: cordova-plugin-whitelist are a core security plugin installed by default (don't uninstall this).</p>
</blockquote>
<h3 id="install-new-plugin"><a class="header-link" href="#install-new-plugin"></a>Install new plugin</h3>
<p> Provide a search in Cordova plugins Registry (<a href="https://cordova.apache.org/plugins/">https://cordova.apache.org/plugins/</a>)
filterable by Platforms. Every result record contains version, last update date and a button install for fast download and install</p>
<h3 id="dynamic-engine-plugins"><a class="header-link" href="#dynamic-engine-plugins"></a>Dynamic Engine Plugins</h3>
<p> Official Dynamic Engine plugins section. For download and install a plugin, verify your git account (required for gitlab access)</p>
<h3 id="variants"><a class="header-link" href="#variants"></a>Variants</h3>
<blockquote>
<p>Cordova doesn't provide an explicit variant support, but provide a flexible build system customizable with hook (<a href="https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/">https://cordova.apache.org/docs/en/latest/guide/appdev/hooks/</a>).
For install variants support in your project, link variants_after_prepare.js and variants_before_prepare.js hooks in your config.xml (see de-core-plugin doc)</p>
</blockquote>
<p>For create new variants, click to create new variant, insert your variant name and save it.
Now your variant could be appear in variant selector:</p>
<p> <img src="./images/VariantSelector.png"></p>
<p>For every variant you can add preference (name-value pair) for every platform (Global section) or platform specific (Android, iOS or Browser)</p>
<p class="img-container"><img src="./images/VariantScreen.png"></p>
<blockquote>
<p>NB: save changes before switch to other views</p>
</blockquote>
<p>You can also modify variants definition manually (open and edit ./variants/variants_def.xml file)</p>
<pre class="hljs"><code><span class="php"><span class="hljs-meta"><?</span>xml version=<span class="hljs-string">"1.0"</span> encoding=<span class="hljs-string">"UTF-8"</span> standalone=<span class="hljs-string">"yes"</span><span class="hljs-meta">?></span></span>
<span class="hljs-tag"><<span class="hljs-name">variants</span>></span>
<span class="hljs-comment"><!-- define variant dev --></span>
<span class="hljs-tag"><<span class="hljs-name">variant</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"dev"</span>></span>
<span class="hljs-comment"><!-- global preferences for dev--></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"motif.serverUrl"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"http://192.168.7.68:8080"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"motif.requestPath"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"/json"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"motif.end2EndEncryption"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"deTools.enableServerMock"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>/></span>
<span class="hljs-comment"><!-- platform-specific preferences for dev --></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"deTools.debuggerUrl"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"http://192.168.1.2:3000"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"deTools.enableServerMock"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"true"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">platform</span>></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ios"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"deTools.debuggerUrl"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"http://192.168.1.2:3001"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">platform</span>></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"browser"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"deTools.debuggerUrl"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"http://192.168.1.2:3001"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">preference</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"motif.end2EndEncryption"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"fale"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">platform</span>></span>
<span class="hljs-tag"></<span class="hljs-name">variant</span>></span>
<span class="hljs-comment"><!-- define variant uat --></span>
<span class="hljs-tag"><<span class="hljs-name">variant</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"uat"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ios"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"browser"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">variant</span>></span>
<span class="hljs-comment"><!-- define variant prod --></span>
<span class="hljs-tag"><<span class="hljs-name">variant</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"prod"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"android"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"ios"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">platform</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"browser"</span>/></span>
<span class="hljs-tag"></<span class="hljs-name">variant</span>></span>
<span class="hljs-tag"></<span class="hljs-name">variants</span>></span></code></pre><h2 id="push-tool"><a class="header-link" href="#push-tool"></a>Push Tool</h2>
<p>Development purpose only tools for send push notification to Android and iOS platform</p>
<h3 id="configuration"><a class="header-link" href="#configuration"></a>Configuration</h3>
<p><img src="./images/PushSettings.png">
APN configuration require PEM certificate, PEM key and Passphase.</p>
<p>See <a href="https://gitlab.vipera.com/dynamic-engine/de-plugins/wikis/how-to-setup-apple-apn-certificates-for-ios-push-notifications">https://gitlab.vipera.com/dynamic-engine/de-plugins/wikis/how-to-setup-apple-apn-certificates-for-ios-push-notifications</a> for more information</p>
<h3 id="send-a-push"><a class="header-link" href="#send-a-push"></a>Send a push</h3>
<p>After configuration, use send push view for create and send your push notification
<img src="./images/SendPush.png"></p>
<h2 id="run-configuration"><a class="header-link" href="#run-configuration"></a>Run Configuration</h2>
<p>Open a right panel with Build/Run configuration, integration with remove server (live-reload, remote assets and browser emulation) and npm script integration.</p>
<h3 id="platforms-section"><a class="header-link" href="#platforms-section"></a>Platforms Section</h3>
<p>With this collapsable section you can build and run your application in your device/emulator</p>
<p class="img-container"><img src="./images/Platforms.png"></p>
<p>For execute a build , choose a platform in the firs select and click to build (with the second selector your build variant). For build in release, select Release under Build settings sub section. (see <a href="https://cordova.apache.org/docs/en/latest/reference/cordova-cli/#cordova-build-command">https://cordova.apache.org/docs/en/latest/reference/cordova-cli/#cordova-build-command</a> for more information about use of build.json as a buildConfig)
After build success you can run app in a device/emulator.</p>
<h3 id="remote-server-section"><a class="header-link" href="#remote-server-section"></a>Remote server section</h3>
<p>If your app use de-tools-plugin, you can connect this with atom plugin and use live-reload feature (Atom plugin provide your app assets remotely).</p>
<p class="img-container"><img src="./images/RemoteServer.png"></p>
<p>In this panel you can set your mock implementation (for browser emulation), a folder where save NativeStorage of your mock save data (with a custom and reusable format) and a libraryLoader js (see <strong>How to define library Loader</strong> section for more details),</p>
<h4 id="how-to-define-library-loader"><a class="header-link" href="#how-to-define-library-loader"></a>How to define library loader</h4>
<p> de-tools-plugin support mock implementation of Dynamic Engine communication based on js file named (for convention) ControllerMock. In this file you can implement your mock logic using all platform api and imported js library. For example, after NativeStorage plugin installation, you can use this for save and load data in your mock. However, when you use atom remote server (for example for browser emulation), your mock implementation run in a node server. How to provide same api/js-library when mock is running in atom? Set a library loader module implementation.
Library loader is a js module that allow you to load custom js (like a script in your index) and define clobber that is normally provided by your platform plugins.</p>
<pre class="hljs"><code> <span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(reload,serviceBridge)</span></span>{
/* use reload to <span class="hljs-built_in">require</span> js file <span class="hljs-keyword">or</span> npm modules
* <span class="hljs-keyword">and</span> use serviceBridge <span class="hljs-keyword">for</span> access to service
* such as persistenceService (aka NativeStorage) <span class="hljs-keyword">or</span>
* localStorage emulator (aka DEStorage)
*/
var toolsNativeStorage = serviceBridge.getService(<span class="hljs-string">"NativeStorage"</span>);
var toolsDEStorage = serviceBridge.getService(<span class="hljs-string">"DEStorage"</span>);
//Define your custom adapter here (N.B: define adapter globally);
/* example: support native storage set <span class="hljs-keyword">and</span> getString api:
NativeStorage = {
set:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(key,value,success,fail)</span></span>{
toolsNativeStorage.set(key,value);
setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
success();
});
},
getString:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(key,success,fail)</span></span>{
toolsNativeStorage.get(key,success);
}
};
*/
}</code></pre><h3 id="script-tool"><a class="header-link" href="#script-tool"></a>Script Tool</h3>
<p>With this tool you can run your node script (script defined in package.json)
<img src="./images/ScriptTool.png"></p>
</article>
</body>
</html>