mfly-interactive v1.8.3

Mediafly Interactives

Install

Option 1: Global install (if you are not using build tools such as gulp)

Enter the following in the terminal

$ npm install -g mfly-interactive

Run in the folder where the Interactive is located.

$ mfly-interactive serve

Option 2: Local install (if you have gulp, grunt, etc. with a static file server)

This package can also be used as a node.js middleware. You can plug in this middleware in the static file server responsible for serving up your Interactive.

Enter the following in the terminal

$ npm install mfly-interactive --save-dev

Here is an example of how to set up a BrowserSync server. The same can be done with any connect server as well. Here, the middleware provided by mfly-interactive can be supplied to your server.

var browserSync = require("browser-sync")
var options = require('./mfly-interactive.config.json')
//Viewer slug is required here
options.slug = '{VIEWER_SLUG}'
var viewerMiddleware = require('mfly-interactive')(options)
	
browserSync({
	files: 'app/**',
	https: true,
	server: {
		baseDir: './app',
		middleware: [
			viewerMiddleware
		]
	}
})

Initialize

1. Upload the Interactive into Airship
2. Run mfly-interactive init. See Explanation for required parameters for details on how to find information requested by this command.

Note: The init command creates mfly-interactive.config.json at the root of your Interactive. mfly-interactive.config.json contains Airship user specific information. Be sure to add it to your .gitignore file.

Please note that local changes to the Interactive will not update the uploaded Interactive. When finished making changes, you will need to upload the Interactive in Airship again.

Testing Interactives on iOS (Availability: iOS (662))

Note: Only the Interactives that leverage the new HTTP scheme are supported.

mfly-interactive can speed up testing of Interactives on iOS. Specifically it provides the following 2 features:

1. Interactives will live reload in the iOS app upon file save.
2. JavaScript console messages from the iOS WebView will be shown in the terminal.

Steps to set this up:

1. Ensure mfly-interactive serve command is running.
2. Open the iOS app and tap Settings > More > About on the bottom.
3. You should see a Select Server dialog. Select the correct server based on your IP address.
4. Navigate to the specific Interactive you are working on.
5. Open the Interactive.

Now you are set to test your Interactive on iOS. Turn off the debugging proxy by following the same steps above.

Packaging an Interactive

While the publish command will package and upload the Interactive, mfly-interactive can only package the Interactive as well by running:

$ mfly-interactive release

Publishing an Interactive

Once you are ready to test the Interactive on other platforms, or if you are ready to publish it for your users, you can publish it by using the following command.

$ mfly-interactive publish

Open Interactive in Airship or Viewer

You can navigate to the Interactive in Airship or Viewer by using the open command by running:

mfly-interactive open airship
mfly-interactive open viewer

Using multiple config files (requires v1.7.1)

When you are using build tools such as Grunt, or Gulp, and compiling your single page application to a folder such as dist, you may not want the mfly-interactive.config.json file in your dist folder. This folder could be deleted and recreated during a file watch trigger that recompiles the whole app. In this case, you can put your config file in the parent folder of the dist folder, and point mfly-interactive at that config file. You can supply a --config option to mfly-interactive. Another use case for being able to use multiple config files is when you are managing multiple Interactives uploaded in Airship (for development, staging, production, etc.)

Below are some examples:

mfly-interactive serve --config ../mfly-interactive.config.json
mfly-interactive publish --config ../config/mfly-interactive-prod.config.json

Explanation for Required Parameters

• Airship User ID and Password: Credentials used to log into https://airship.mediafly.com
• Airship Item Id: This is the Id for the Interactive in Airship. You can locate it by navigating to the item in Airship and extractig it from the URL. In the following example, the Airship item Id is 0-265955-265962.
• Company Code: Company code used in Viewer.

Reconfiguring

It is possible that the Airship Item Id or the Viewer slug of the your Interactive changes. In this case, you will need to reconfigure the Interactive. You can do this by runninig mfly-interactive init again.

A note on HTTPS

Your browser will show a warning about HTTPs. Ignore this warning.