Overview
When developing a web based application, you would often want to use some external resources that are loaded on runtime, such as third-party libraries, images, and audio files.
Eko projects that are served on Eko’s mobile app can be downloaded by users for offline viewing. These projects are packed into downloadable packages. The packing process must handle the external resources used by the project to provide a fully functional offline package. In order to support that, any external resource used in the project must be defined in a configuration file extResources.json
located in the src/js
folder.
This file is a map of URLs. Nesting is supported and is commonly used for namespacing. Here is an example:
{
"pixi": "//eko.com/resources/js/plugins/pixi/pixi.min.gz.js",
"images": {
"img1": "https://myhost.com/resources/myImg1.jpg",
"img2": "https://myhost.com/resources/myImg2.jpg"
}
}
Example
Initial code
Let’s say you are using our pixi plugin and also have some custom buttons with background images.
Your intro.js
may look like this:
import loadjs from 'loadjs';
export default {
onIntroReady: function(player) {
// Load the pixi plugin
loadjs('https://eko.com/resources/js/plugins/pixi/pixi.min.gz.js');
.then(() => {
player.initPlugin('pixi');
});
}
}
And your app.js
like this:
import EkoUIComponents from 'EkoUIComponents';
class MyButton extends EkoUIComponents.EkoDecisionButton {
getContent() {
const styles = {
backgroundImage: 'url(https://myhost.com/resources/myImg1.jpg)',
backgroundSize: 'cover'
};
return (
<button style={styles}>
<span>{super.getContent()}</span>
</button>
);
}
}
export default {
onReady: function(player) {
player.ui.override('button_beginning_0e6cf6', MyButton);
player.pluginInited('pixi').then(() => {
// Do something that requires the pixi plugin
});
}
};
The pixi plugin and the button image URLs are hardcoded in the code. Now, let’s use extResources.json
and move the required URLs from the code.
Creating the config
Under the src/js
folder of your checked out project and you’ll find an empty extResources.json
. Have the URLs configured there. In this example we also use some nesting to include a namespace for the images.
In order for a project to work correctly offline, the external resources URLs configuration must reside in
src/js/extResources.json
.
{
"pixi": "//eko.com/resources/js/plugins/pixi/pixi.min.gz.js",
"images": {
"img1": "https://myhost.com/resources/myImg1.jpg"
}
}
Loading the config
The config file should be loaded and parsed into a JavaScript object to be used in your code.
All you need to do is import 'extResources'
in both intro.js
and app.js
. For example:
import extResources from './extResources.json';
export default {
onReady: function(player) {...},
};
Using the config in your code
The next step is replacing the URLs in the code. Here is the final code after the replacement:
intro.js
import loadjs from 'loadjs';
import extResources from './extResources.json';
export default {
onIntroReady: function(player) {
// load pixi plugin
loadjs(extResources.pixi, { returnPromise: true })
.then(() => {
player.initPlugin('pixi');
});
}
};
app.js
import extResources from './extResources.json';
import EkoUIComponents from 'EkoUIComponents';
class MyButton extends EkoUIComponents.EkoDecisionButton {
getContent() {
const styles = {
backgroundImage: extResources.images.img1,
backgroundSize: 'cover'
};
return (
<button style={styles}>
{/* This fetches the button text as defined in Eko Studio */}
<span>{super.getContent()}</span>
</button>
);
}
}
export default {
onReady: function(player) {
player.ui.override('button_beginning_0e6cf6', MyButton);
player.pluginInited('pixi').then(() => {
// Do something that requires the pixi plugin
});
}
};