What's a Webapp?
A webapp is a self-contained web application which can be deployed to the Revel Digital CMS for use in your digital signage. Webapps are a great option for kiosk applications or for adding more sophisticated dynamic elements to your signage.
Webapps can be built using most any modern HTML5 framework including Angular, React, and Vue. This allows developers the freedom to utilize the tools they are most familiar with or most applicable to the job.
Webapps are deployed and stored locally on your device in order to be fully functional in an offline situation. This is important in order keep your signage or kiosks operational at all times regardless of connectivity.
The Player <> Webapp Interface
It's important for a Webapp to have context. This means the Webapp should have knowledge of the device it's currently running on. Webapps running on the Revel Digital platform are able to interface with the underlying player software in order to perform tasks such as event tracking and command handling, as well as determine device information such as device name, location, time zone, etc.
Revel Digital provides a JavaScript library designed to simplify the Webapp / Player interface. This library can be utilized in any modern JavaScript context and is included in our sample apps for Angular, React, and Vue.
Documentation on the JavaScript Client SDK is available here: https://reveldigital.github.io/reveldigital-client-sdk/
Deploying your Webapp
There are a couple options for deploying your Webapp to your signage network. Deployment generally consists of packaging up the Webapp, uploading to the Revel Digital CMS, then assigning the Webapp asset to a zone in a template or playlist.
GitHub Workflow (Preferred)
Using GitHub Workflows is a great way to deploy your Webapps since it automates much of the busy work and fits in nicely with many enterprise CI pipelines. Workflows will automatically detect a new version of your Webapp has been pushed, then automatically performs the build and publish stages for you.
GitHub Workflows utilize Actions in order to perform the various stages of the workflow. Revel Digital provides an Action specifically designed for performing the upload to your Revel Digital account. This includes packaging the app, then uploading to the folder of your choice. There are also options for assigning tags to the Webapp which can include metadata specific to the build including version and release type.
The Revel Digital GitHub Action is available on the GitHub Marketplace here:
https://github.com/marketplace/actions/revel-digital-webapp-deploy-action
Along with the Action, we have provided 3 sample apps pre-configured with the Workflow:
- Angular: https://github.com/RevelDigital/ng-test-client-sdk
- Vue: https://github.com/RevelDigital/vue-test-client-sdk
- React: https://github.com/RevelDigital/react-test-client-sdk
Feel free to fork the repository of your choice as a starting point for your own Webapp build.
Note: An API key from your Revel Digital account is required in order to utilize the Workflow. This must be assigned as a repository Secret within your Github repository settings.
Manual Deployment
You can always manually upload your Webapp just as any other media item.
The process is as follows:
- Build your app as you would for production use (ie. npm run build)
- Archive (zip) the build folder (ie: /dist) and rename the extension from .zip to .webapp. Make sure you are archiving the root folder which contains the index.html file.
- Upload the X.webapp file to your Revel Digital account as you would any other media item
Adding Webapps to your digital signage
With your Webapp uploaded to your Revel Digital account, you are ready to embed it into your signage. Just add a Web zone to any template, then configuring it to use your uploaded Webapp asset. The web zone has no restrictions on placement, so you can always embed it within other template content or even utilize player scripting for more advanced control.
Comments
0 comments
Please sign in to leave a comment.