A list of tips and procedures to test your HTML-based application on Stagecast infrastructures.
Creating a Development Sandbox
When a webview (for example the one integrated in the Stagecast app) launches a Moment, it will pass certain information to the Moment. Because we will develop and test our Moment on our locale machine first, before pushing it to a staging server, we have to create a development sandbox, which takes care of passing test data to our Moment.
To mimic the data being passed to the moment we have to retrieve an API token and some information about our moment first. Currently you have to make two POST requests to the Stagecast API manually. Feel free to use a HTTP client like Postman to make your life easier.
Get the token
POSThttps://stagecast.se/api/users/login
First we will have to get our API token by making a login request to Stagecast’s API. Only the token property of the response will be relevant for us.
Request Body
{..."token": "<YOUR_API_TOKEN>"...}
Next we have to retrieve the momentID and the momentClassID from the Stagecast Sandbox API. You will need your eventID for this request. You can find the eventID in the URL when opening an event in the Stagecast Web Platform:https://stagecast.se/dashboard/events/<YOUR_EVENT_ID>/launchpad
After retrieving those values from the API we can start setting up our sandbox.
Our sandbox/adapter is a simple HTML/JS application itself, which will launch the Moment inside an iframe.
For this we will create a few files in the directory src/adapters/tests (you have to create this directory manually).
The content of the folder is the following:
<!DOCTYPE html>
<!DOCTYPE html>
<!-- Use this file to test your Moment -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Treasure Hunt Moment Tester</title>
<style>body {
position:fixed;
padding: 0px;
margin: 0px;
overflow:hidden;
height:100vh;
width:100vw;
}
#frame {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
margin:0;
padding:0;
overflow: hidden;
box-sizing: border-box;
border-style: none;
}
</style>
</head>
<body>
<!-- iframe where the treasure hunt moment will be loaded. -->
<iframe id="frame" title="Treasure Hunt Moment" onload="iframeLoaded()" src="../../mobile/index.html"></iframe>
<script src="./test-data.js"></script>
<script src="./loader.js"></script>
</body>
</html>
var momentData = {"environment":"staging",// staging or production"userId":"f.tester@stagecast.com",// The userID of the test user"token":"<YOUR_API_TOKEN>",// The API token we just retrieved from the API"momentClassData": {"sender":null,"language":"en","notification":true,"message":"","showSponsor":true,"sponsor": {"logos": [],"credit":"The moment is provided by:" },"showTopBanner":true,"topBannerMessage":"Download Stagecast App and type in the code 9279","custom": { // This will contain the custom Moment data from the configuration form"backgroundImage": ["E77DFDBB-1C5B-4977-8FE5-CD0A8D1850E3"],"resultBackgroundImage": ["E77DFDBB-1C5B-4977-8FE5-CD0A8D1850E3"],"infoText":"TBD","prizeImage": ["F827F4D2-A805-4C31-8284-3079B0E51666"],"prizeDescriptionHeadline":"You can win a prize","prizeDescriptionText":"This is a description of the prize","prizeButtonText":"Prize","winText":"Congratulations! You have won a prize.","claimButtonLink":"https://google.com","claimButtonText":"Claim prize","quests": [{"id":"option0","image": ["FC68B874-44DF-4449-8EDC-8DA6280A65D0"],"imageLink":"https://google.com","name":"Quest 1","question":"Visit London...","answers":"32,thirtytwo,thirty two" }, {"id":"option1","image": ["69DE8CA3-B9F7-40EE-9413-EAB2F521FE5C"],"imageLink":"https://google.com","name":"Quest 2","question":"Visit Vienna...","answers":"15,fifteen" }] } },"momentClassId":"<YOUR_MOMENT_CLASS_ID>",// The Moment Class ID we retrieved from the API before."momentId":"<YOUR_MOMENT_ID>",// The Moment ID we retrieved from the API before."created":1583925842255,"eventId":"<YOUR_EVENT_ID>",// The Event ID we retrieved from the Dashboard URL."disableLogs":false,"coordinates": ["0","0"],"isGuest":false,"isActive":true,"isMomentActive":true}
src/adapters/tests/mobile.adapter.html: With this file we create an iframe, and link it to the index.html inside our src/mobile folder (So our Moment will launch inside this iframe).
src/adapters/tests/test-data.js: This is the data we will seed the Moment with. This JavaScript object is normally passed to the Moment via the Stagecast App/Webview integration. Now we have to inject the test data we’ve just created into the iframe in our mobile.adapter.html. This is done in the loader.js file we include right after the test-data.js.
src/adapters/tests/loader.js: Inside this file we define the functioniframeLoaded() which will be called as soon as the iframe finishes loading. Once loaded, we will pass the variable momentData we’ve just created to our iframe with the postMessage() method.
That’s it. From now on we can launch our moment by opening the src/adapters/tests/mobile.adapter.html file. Right now you won’t see much, because our moment is still an empty HTML file, but let’s change that!
