Embedding Megaphone into Your Mobile App

When home viewers use Megaphone TV to cast a vote or interact with a show, they typically visit a page on the broadcaster's web site, such as xyztv.com/vote. The page includes Megaphone TV's web app, which is known as MegaController. But MegaController can also be embedded into a native iOS or Android app. This document describes how to embed MegaController into your own iOS or Android mobile app.

Embedding Megaphone into an iOS App

To embed MegaController into an iPhone or iPad app, follow these steps:

1) Adding the Web View

In your story board, navigate to the view into which you will be embedding MegaController. Next, add a Web View to your view, as follows:

2) Connecting the Web View to the View Controller

Once the Web View is on your View, refer your newly added Web View in your ViewController.h file, as follows:

  1. In the top navigation, select View > Assistant Editor > Show Assistant Editor.
  2. Under View Controller Scene > View Controller > View, right click Web View and drag it to the ViewController.h file:

  1. Give the Web View a name. For this example, we'll use megaController.

3) Loading Megaphone's URL into the Web View

MegaController is a hosted web application, accessed via a URL provided to you by your Megaphone TV representative.

To display MegaController in your app, load the provided MegaController URL into your Web View, as shown in the following examples. In the examples, replace https://mpcontrollers.s3.amazonaws.com/station/show/live/index.html with your actual MegaController URL.

Example: Objective-C

// ViewController.m

// EmbedSample

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

// Replace with URL provided by Megaphone TV

NSString *megaControllerUrlString = @"https://mpcontrollers.s3.amazonaws.com/station/show/live/index.html";

NSString *megaControllerUrl = [NSURL URLWithString: megaControllerUrlString];

NSURLRequest *urlRequest = [NSURLRequest requestWithURL:megaControllerUrl];

[_megaController loadRequest:urlRequest];

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

Example: Swift

//  ViewController.swift

//  EmbedSample-Swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var megaController: UIWebView!

    override func viewDidLoad() {

        super.viewDidLoad()

 // Replace with URL provided by Megaphone TV

        megaController.loadRequest(URLRequest(url: URL(string: "https://mpcontrollers.s3.amazonaws.com/station/show/live/index.html")!))

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

        // Dispose of any resources that can be recreated.

    }

}

4) Size and position the Web View

Apply a size and position for your Web View. In this example, we'll configure the Web View to occupy the full screen (with the exception of the iOS status bar).

  1. Under View Controller Scene > View Controller > View, click the Web View ("Mega Controller").
  2. In the bottom panel, select the Add New Constraints  icon.
  3. Set the following constraints:

            
    Add-contraints.jpg
  4. Select Add 4 Constraints

5) Run Your App

Run the app. If everything is configured correct, your Web View should look like this:

iOS Resources

For help with iOS app development, please see:

Now let's move on to embedding MegaController into an Android app.

Embedding Megaphone into an Android App

1) Adding the WebView

  1. Open activity_main.xml.
  2. Insert the following element:

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/megaController"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

/>

  1. Open AndroidManifest.xml.
  2. Insert the following element:

<uses-permission android:name="android.permission.INTERNET" />

2) Loading Megaphone's URL into the WebView

MegaController is a hosted web application, accessed via a URL provided to you by your Megaphone TV representative.

To display MegaController in your app, load the provided MegaController URL into your WebView, as shown in the following example (replace https://mpcontrollers.s3.amazonaws.com/station/show/live/index.html with your actual MegaController URL). Additionally, enable JavaScript and DomStorage.

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

   private WebView megaController;

   @Override

   protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.activity_main);

       megaController = (WebView) findViewById(R.id.megaController);

// Required!

       megaController.getSettings().setJavaScriptEnabled(true);

       megaController.getSettings().setDomStorageEnabled(true);

// Replace with URL provided by Megaphone TV

       megaController.loadUrl("https://mpcontrollers.s3.amazonaws.com/station/show/live/index.html");

   }

}

5) Run Your App

Run the app. If everything is configured correct, your WebView should look like this:

Android Resources

For help with Android app development, please see: