Shoulder.dev Logo Shoulder.dev

Developing a Simple Message App with Screenly Playground

Scenario: A developer wants to create a Simple Message App for digital signage using Screenly Playground. In this guide, we will walk you through the process of creating a message app from scratch using the Screenly Playground platform.

First, let's familiarize ourselves with the project structure and required files:

The project consists of several directories and files:

  • bootstrap/
    • theme/
      • images/
      • playground-theme.css
      • README.md
    • README.md
  • docs/
    • resolutions.md
  • dynamic-playlists/
    • Dockerfile
    • Procfile
    • README.md
    • app.json
    • app.py
    • requirements.txt
  • edge-apps/
    • asset-metadata/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • clock/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • countdown-timer/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • iframe/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • instagram/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • powerbi/
      • static/
      • README.md
      • index.html
      • powerbi.min.js
      • screenly.yml
    • qr-code/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • rss-reader/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • simple-message-app/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • weather/
      • static/
      • README.md
      • index.html
      • screenly.yml
    • images/
      • cyfe-logo.png
      • domo-logo.png
      • dynatrace-logo.svg
      • jenkins-logo.png
      • magento-logo.png
      • nagios-logo.png
      • playground.png
      • screenly-logo.png
      • shiphero-logo.png
      • shopify-logo.png
      • tableau-logo.png
      • yahoo-logo.png
      • zabbix-logo.svg
  • javascript-injectors/
    • examples/
      • cyfe-sign-in-via-credentials.js
      • domo-dashboard-via-access-code.js
      • domo-dashboard-via-credentials.js
      • dynatrace-login-via-credentials.js
      • ezcookie-cookies-consent-closing.js
      • hello-world.js
      • jenkins-sign-in-via-credentials.js
      • magento-signin-via-credentials.js
      • nagios-signin-via-credentials.js
      • powerbi-signin-via-cookies.js
      • powerbi-signin-via-credentials.js
      • screenly-signin-via-cookies.js
      • shiphero-signin-via-credentials.js
      • shopify-signin-via-credentials.js
      • tableau-via-cookies.js
      • unifi-signin-via-credentials.js
      • yahoo-cookies-consent-closing.js
      • zabbix-login-via-credentials.js
    • README.md
  • scripts/
    • grafana/
      • README.md
      • add-grafana-asset.py
      • requirements.txt
  • CNAME
  • LICENSE
  • README.md

Now, let's begin creating our Simple Message App.

  1. Create a new directory for your app within the edge-apps folder:
mkdir simple-message-app
cd simple-message-app
  1. Initialize a new Node.js project:
npm init -y
  1. Install the required dependencies:
npm install express body-parser
  1. Create a new file named index.html within the static directory:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Message App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Welcome to Simple Message App!</h1>
</body>
</html>
  1. Create a new file named app.js within the project directory:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 80;

app.use(bodyParser.json());
app.use(express.static('static'));

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/static/index.html');
});

app.listen(port, () => {
  console.log(`Simple Message App listening at http://localhost:${port}`);
});
  1. Update the package.json file to include a start script:
"scripts": {
  "start": "node app.js"
}
  1. Create a new file named screenly.yml within the project directory:
---
name: Simple Message App
description: A simple message app for digital signage using Screenly Playground
version: 1.0.0

app:
  entry: app.js
  port: 80
  1. Build and run your app:
npm start

Your Simple Message App should now be running on http://localhost:80.

Tests to verify the answer:

  1. Open your browser and navigate to http://localhost:80. You should see the "Welcome to Simple Message App!" message.
  2. Use a tool like Postman or curl to send a GET request to http://localhost:80. The response should include the contents of index.html.
  3. Restart your app and check the logs for any errors.
  4. Use a tool like Docker to build and run a Docker image of your app. The image should be able to serve the index.html file when accessed on port 80.