Document marked as: CONFIDENTIAL
CUSTOM APPS:
- Instantly distribute your own web content & data to all your displays
- Let others easily adjust your app settings in Rocket Manager
- Instantly send 3rd party data (e.g from your CRM, e-commerce platform) to all your apps and screens
- Create your ‘Custom App Template’
- Deploy your app code
- via UPLOAD
- via CLI (Command Line Interface)
- *How to define app settings-schema.json - coming soon
- Add your template to ‘My Apps’
- CREATE YOUR CUSTOM APP TEMPLATE
- Go to App Store > Custom Apps > ‘Create Your Custom App Template’
- Give your template a name & description
- Choose the method for deploying your app source code and Click SAVE
- DEPLOY YOUR APP SOURCE CODE
Tips:
- Please make sure all your assets are using relative paths
- Set your default app background in css as the default background on the TVs is black
- Deploy via ‘Upload’
- Your source code needs to be in a compressed .ZIP folder :
- index.html - required file
- schema.json - optional file (this is where you can specify app settings for other users)
- Once your source code is uploaded the deployment process will start. On success source code version will be automatically generated by Signage Rocket and any settings (if specified in schema.json) will show as active.
You can upload a new version of the code anytime, just make sure that each time a new .ZIP folder is generated.
- Deploy via ‘CLI’ - Use this method if you prefer to use Command Line Interface for deployment.
- If you have chosen this method you will see an ‘App Deploy token’ (unique to your application) that has been generated. You will use it later in your CLI
- Open up your CLI and install ‘Rocket CLI’ package :
$ npm i -g https://0f8d0d258ac490fcb0a5f58ddcf77ef4e6635b07:x-oauth-basic@github.com/signagerocket/rocket-cli.git |
$ yarn global add https://0f8d0d258ac490fcb0a5f58ddcf77ef4e6635b07:x-oauth-basic@github.com/signagerocket/rocket-cli.git |
- In your CLI go to the root of your application e.g. my-custom-app
( build path - the relative path to your build. This is what will be deployed. It must contain at minimum an index.html )
Example of the application folder structure
- Initialise your app
a folder ‘.rocket’ will be created inside your project:
- Copy the unique token from your app template and paste to CLI
$ Please enter your app token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2NvdW50SWQiOjEsImFwcFRlbXBsYXRlSWQiOjEwNSwiaWF0IjoxNTM3NTQxOTQxfQ.ixy-Ekd_6bP7u7gi9XFI6JtOdOvKEptV9aACKJiGIwU |
$ Where is the folder where your built application will be?(./build) |
- Inside the .rocket folder the following files have been created: ‘config.json’ and ‘schema.json’
schema.json - this is where you specify your app settings for other users. This file is optional, you can leave it blank.
- Now run a deploy command:
- The deployment process will start. On success source code version will be automatically generated by Signage Rocket and any settings (if specified in schema.json) will show as active.
- If you make updates to your app source code or settings just run ‘rocket deploy’ each time. The new version of your app will be automatically deployed.
- Please note: if you delete your app template make sure you also delete the ‘.rocket’ folder inside your app folder structure as it cannot be reused.
- How to specify app settings in schema.json
You can add settings to your application so users can easily customize the app to their own taste. You decide what these settings are. The settings will appear in your application e.g.:
Schema.json format:
{
"styles": {
"image1": "fa-code",
"imageColor": "#FFFFFF",
"imageBackground": "#039be5",
"imageSize": "6vw",
"imageUrl": "images/app.jpeg",
"tutorialUrl": ""
},
"meta": {
"texts": {
"intro": "This is a custom app example",
"list": {
"features": [
{
"header": "Feature header example",
"description": "Feature description example"
}
]
}
}
},
"fields": {
},
"events": [
]
}
- ADD YOUR TEMPLATE to ‘My Apps’
- Create app instance by clicking ‘ADD TO MY APPS’ inside the template, or
from App Store view by clicking + on the app tile:
- Give your app instance a name and adjust the settings (if applicable)
- The app instance will appear in ‘My Apps’ and you can now assign it to your display: