Creating an M/IC App in JavaScript

Making a custom M/IC app is a great way to make a real-time experience that involves gaming, voting or live interaction.

A developer with knowledge of HTML5, CSS & JavaScript will be able to easily produce a rich application within a day.

This tutorial will get you started with a simple app that connects to M/IC and illustrates the core concepts. We assume here that you've read the Core Concepts of LViS.

The M/IC JavaScript Library & APIs

To build an M/IC App, you'll be using the API provided through the M/IC JavaScript library. As a developer you'll be able to build a custom client app that's fed with live data from M/IC, and sends data such as trivia choices or votes back to the server for aggregation.

Alternatively to using this API it is possible to poll data from JSON Public Feeds although this is read-only communication.

Event Listings

When the client first connects to the server, it receives a list of upcoming M/IC events. We call this simply Listings. Listings contain all the data associated with each Event, as scheduled in M/IC Studio. Each M/IC Event is identified by a unique identifier, the UUID.

For example, if an event called “Big Show” starts at 20:00, and has a cover image plus custom fields associated with it, you'll receive all of that through Listings.

Listings are provided transparently through the library, and can also be retrieved as JSON data files through Public Feeds.

M/IC Elements

M/IC Apps are created from Interactive Elements such as Regular Poll, Trivia or Data. These are the building blocks of your app; you might use just one, or you can combine them with other services such as Leaderboards to make games.

Javascript
Example
Javascript
object.bind('event_name', handler, [context]);
// alternative syntax
object.on('event_name', handler, [context]);
Example
var handler = function () {
// do something to handle the event in here
};
someObject.bind("event_name", handler);
// alternative syntax
someObject.on("event_name", handler);
Javascript
Example
Javascript
object.unbind('event_name', [handler]);
// alternative syntax
object.off('event_name', [handler]);
Example
// handler from the "subscribe" example
someObject.unbind("event_name", handler);
// alternative syntax
someObject.off("event_name", handler);

Including M/IC API

In order to connect, you need two pieces of data from your M/IC Project:

  • Project UUID

  • Static host (host)

All values can be found within M/IC Studio Project Settings as illustrated here: