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
/ htdocs / de_plugins / de_tools.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>Tool plugins for Dynamic Engine</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="tool-plugins-for-dynamic-engine"><a class="header-link" href="#tool-plugins-for-dynamic-engine"></a>Tool plugins for Dynamic Engine</h1>
<p>Plugin for use Dynamic Engine Tools (Atom plugin). This plugin is only for development purpose: remove before release.</p>
<p>With this plugin you can connect your app with DE tools provided via Atom plugin (Mock and persistent storage,live-reload in all platform ecc..).</p>
<p><span style="color:orange">
<em>Warn: For use this plugin (and compile after install) in Android/iOS platform, you MUST install and config de-assetmanager-plugin. For Android asset deploy is required.</em>
</span></p>
<h2 id="how-to-create-a-motif-connector-mock"><a class="header-link" href="#how-to-create-a-motif-connector-mock"></a>How to create a motif connector mock</h2>
<p>Through de-tools-plugin, you can define a file js that implements operation and service for emulate a motif communication.</p>
<pre class="hljs"><code> <span class="hljs-comment">//----------- MANDATORY BLOCK</span>
Controller ={};
Controller.mock= {};
Controller.mock.requestId=<span class="hljs-number">0</span>;
Controller.mock.appDomain=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"VIPERALAB"</span>;
}
Controller.mock.appName=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"E2EE_TESTS"</span>;
}
Controller.mock.sessionId=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"SESSION_MOCK_12345"</span>;
}
Controller.mock.newRequestId=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> Controller.mock.requestId++;
}
Controller.mock.userId=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-keyword">return</span> <span class="hljs-string">"USER_ID_OO1"</span>;
}
Controller.mock.init=<span class="hljs-literal">undefined</span>;
<span class="hljs-comment">// executed automatically after device ready event</span>
Controller.mock.appStarted=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Override appStarted"</span>);
Controller.mock.init=<span class="hljs-literal">true</span>;
}
<span class="hljs-comment">//------------ END OF MANDATORY</span>
<span class="hljs-comment">/**
* Utilities for build response
*/</span>
Controller.mock.buildResponseFromRequest = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">request,responseHeader</span>) </span>{
<span class="hljs-keyword">var</span> app = request.req.app;
<span class="hljs-keyword">var</span> dom = request.req.dom;
<span class="hljs-keyword">var</span> op = request.req.op;
<span class="hljs-keyword">var</span> srv = request.req.srv;
<span class="hljs-keyword">var</span> resp = {
<span class="hljs-string">"res"</span> : {
<span class="hljs-string">"header"</span> : {
}
}
};
<span class="hljs-keyword">if</span>(responseHeader != <span class="hljs-literal">undefined</span>){
resp.res.header = responseHeader;
}
resp.res.header.dom = dom;
resp.res.header.app = app;
resp.res.header.srv = srv;
resp.res.header.op = op;
<span class="hljs-keyword">return</span> resp;
}
<span class="hljs-comment">// EXAMPLE: define service named MOCK with one operation (named echo)</span>
Controller.mock.COMMON ={
<span class="hljs-attr">echo</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">request</span>)</span>{
<span class="hljs-keyword">var</span> resp=Controller.mock.buildResponseFromRequest(request);
<span class="hljs-keyword">return</span> resp;
}
}</code></pre><p>For enable mock, add relative preference in your config.xml (or variants_def.xml)</p>
<p><code><preference name="deTools.enableServerMock" value="true" /></code></p>
<h2 id="connect-your-application-with-dynamic-engine-tools-atom-plugin"><a class="header-link" href="#connect-your-application-with-dynamic-engine-tools-atom-plugin"></a>Connect your application with Dynamic Engine Tools Atom plugin</h2>
<p>For connect your application with the Dynamic Engine Tools Atom plugin,
you could set the following preference:</p>
<p><code><preference name="deTools.debuggerUrl" value="http://address:port" /></code></p>
<p>where 192.168.1.2:3000 is address:port configured in your atom plugin for specific platform. (See Atom plugin for more information)</p>
<p>EXAMPLE:</p>
<pre class="hljs"><code> <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">allow-intent</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"market:*"</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">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">allow-intent</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"itms:*"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">allow-intent</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"itms-apps:*"</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:3000"</span> /></span>
<span class="hljs-tag"></<span class="hljs-name">platform</span>></span></code></pre><p>NB: for browser platform, set android or ios socket address</p>
<p>In your index page, import the following script after cordova.js import</p>
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'/socket.io/socket.io.js'</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">'/__dedebugger/DEDebuggerClient.js'</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre><p>After connection handshake, you can use server mock definition in Atom plugin for your browser emulation and live-reload feature for every connected platform.</p>
<h4 id="content-security-policy"><a class="header-link" href="#content-security-policy"></a>Content Security Policy</h4>
<p>CSP helps you reduce XSS risks. By default, cordova define a CSP policy in index.html:</p>
<pre class="hljs"><code><meta http-equiv="Content-Security-Policy" content="<span class="hljs-keyword">default-src</span> <span class="hljs-string">'self'</span> data: gap: https://ssl.gstatic.com <span class="hljs-string">'unsafe-eval'</span>; <span class="hljs-keyword">style-src</span> <span class="hljs-string">'self'</span> <span class="hljs-string">'unsafe-inline'</span>; <span class="hljs-keyword">media-src</span> *; <span class="hljs-keyword">img-src</span> <span class="hljs-string">'self'</span> data: content:;"></code></pre><p>socket.io require a connection and eval that violate the default policy:</p>
<p><span style="color:red">
socket.io.js:2 Refused to connect to '<a href="http://localhost:3000/socket.io/?EIO=3&transport=polling&t=Lk5GKHk">http://localhost:3000/socket.io/?EIO=3&transport=polling&t=Lk5GKHk</a>' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: <a href="https://ssl.gstatic.com">https://ssl.gstatic.com</a> 'unsafe-eval'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
</span></p>
<p>For allow the connection, comment CSP or add an exception in CSP policy (see <a href="https://content-security-policy.com/">https://content-security-policy.com/</a> for more info)</p>
</article>
</body>
</html>