Using External Resources

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
        });
    }
};
Rate this page: X
Tell us more!