Using the SDK App

Debug, test, profile, and troubleshoot your module locally

The Oooh SDK is a special version of the Oooh app (currently iOS only) that exists to help you build and test modules. It allows you to load in-development modules off your local web server, or to load versions of modules that have been hosted in the Oooh(dev) environment. From there you can do any number of things that are useful in the craft of building cool modules, like:

  • Running the module as a Creator, Audience member -- or both!
  • Seeing how the data and assets managed by your module look, then saving them locally as collections to be used as inputs for later runs of your module.

We are continually investing in the SDK, so let us know if you see any opportunities for it to better serve your needs.

Let's go!

Installing the SDK App

The SDK is currently not publicly available. To request access:

  • For iOS email the UDID of your device running iOS 14 or higher to [email protected]. Once the request is processed you'll receive a link that you can open on the device to install the SDK.
  • For Android install the APK linked from the latest ChangeLog. (Requires Android 8 or higher)

🚧

Ensure that the link is opened directly in Safari as the installation will not work if you launch the website within another app (ie: clicking the link from Slack, Discord, email, etc..).

Using the SDK

750

When the SDK app starts up you should see something like this.

It's beautiful, isn't it? Here's a quick breakdown of what each field is for:

FieldDescription
ModuleThis dropdown allows you to select any module registered with the Oooh platform, plus the special Custom Settings which allows you to work on a new module that's not yet part of the platform.
PlayTypeThis controls which PlayType the module will be run in. See Play Type for more details.
LevelUsed for testing multi level modules. Whatever value is entered here is made available via level
URLThis shows the URL from which the module webpage will be loaded. There's a checkbox on the far right that allows editing the URL to point to a web server you control, so you can run your local development builds in the SDK!
Delay LoadWith this enabled there's a 5 second delay between the webview starting and the network request to load the modules. Use this to give yourself time to attach the Safari inspector before your module is loaded.
Input AssetsYou can configure named assets to be available to the module via getInputAsset API call. The key value is the identifier you'll use to retrieve the asset and the asset is selected via the asset selection view opened by tapping the magnifying glass icon.
SubmissionsAdvanced. Appears if you select CreatorSubmissionProcessing for the PlayType, allowing you to load into your module with audience submissions selected. The number beside the Select button indicates how many submissions are currently selected, and when the button is pressed you have can selecting data saved previously to create a list of submissions. User information will be randomly generated and linked to the assets.
ConfigurationIf you select "Custom Settings" for the module then you can configure additional key->value string parameters which will be passed into your module and made available via getConfigValue.
Load Module ButtonHitting the load module button at the bottom of the screen will run the configured module within the SDK app. If this button is disabled it's likely there is additional configuration information that has not be properly setup.

When you load the module all of your configuration settings are saved, so the next time you run the app it will be ready to relaunch the same module you last loaded.

If the module fails to load a close button will appear in the top right of the screen after 3 seconds (it appears when the module loads properly as well). You can use that to exit the module and return to the home screen to try another configuration.

Asset Saving

750

The Asset Saving screen

When your module finishes running, it will summon an Asset Saving screen if your code added any assets to the output via the addToOutput API call. A preview of each asset will be displayed, you can view the final Video content, view and edit replay data, modify the name of the asset collection (defaulting to the current date + time), and even modify the names of the assets within the collection if needed.

Saving this data will store it locally to the application to be available when selecting an asset for a future run of a module.

Asset Selecting

750

On the top 3rd of this page, you can manage your saved assets collections. The trash icon on the left of the line will delete a collection and the show button on the right will display its contents in the bottom portion of the page.

The bottom 2-3rds of the page shows the same preview of the assets as during saving, except the data is no longer editable here. Taping the Select button will close this view and populate the input asset line with the selected data.

Development Workflow

The SDK itself does not have runtime debugging tools. Instead, you'll need to use the Safari or Chrome Web Inspector to debug. These should be familiar if you've done web development before!

Android

  1. Enable USB debugging on the Android device
  • Settings -> About Phone -> Build Number - tap 7 times
  • Settings -> System -> Advanced -> Developer Options -> USB Debugging
  1. Connect your device to your computer using a USB cable
  2. Run a module in the SDK app
  3. In Chrome on your desktop navigate to chrome://inspect#devices

iOS

If you have access to a Mac, use desktop Safari to launch the Web Inspector.

  1. Enable the Web Inspector on the iOS device
    • Settings -> Safari -> Advanced -> Web Inspector
  2. Enable the Develop menu in desktop Safari
    • Safari -> Preferences -> Advanced -> Show Develop menu in menu bar
  3. Connect your device to your computer using a USB cable
  4. Run a module in the SDK app
  5. Attach the Safari inspector on your desktop to your device
    • Develop -> Device Name -> hostname

If you are on PC, we recommend using Inspect. Inspect also runs on Mac, if you prefer it.

  1. Enable the Web Inspector on the iOS device
    • Settings -> Safari -> Advanced -> Web Inspector
  2. Install Inspect.
  3. Install iTunes for Windows.
  4. Launch iTunes, connect your device via a USB cable, and Trust the device
    • In iTunes, confirm the "Do you want to allow this computer to access information on this iPhone" prompt
    • On the device, tap "Trust"
  5. With iTunes still open, launch Inspect. You should see your device and its open webviews in the sidebar. If no devices appear, click the link in the sidebar to go through the setup again.
1165

Now you should be able to see all the details of the web page the module is hosted on as if you were running the page in your desktop browser.

If you want to see any console messages or debug your module's load sequence you'll need to enable delay loading to give yourself 5 seconds to attach the inspector.

Finally, once a module is loaded if you wish to make changes to it you can simply update the file on the webserver, hit the close button in the top right of the screen, and then run the module again, without the need to restart the application.

See also Profiling your Code.

IDE Content Assist

If you use an IDE that supports content assistance to develop javascript you'll want to provide it the d.ts file for the o3h.js library.