Shoulder.dev Logo Shoulder.dev

Creating a Custom Edge App with Screenly Playground and Node.js

Scenario: A developer wants to build a custom Edge App using Node.js and Screenly Playground. In this example, we will create a simple Node.js application that displays the current temperature and weather conditions using the OpenWeatherMap API. We will then package this application as a Screenly Edge App.

  1. Setting up the Node.js project:

First, let's create a new Node.js project. Create a new directory called weather-app and initialize it with npm:

mkdir weather-app
cd weather-app
npm init -y

Next, install the required dependencies: axios for making HTTP requests and express for creating a simple web server:

npm install axios express

Create a new file called app.js in the weather-app directory and add the following code:

const express = require('express');
const axios = require('axios');

const app = express();
const port = process.env.PORT || 3000;

app.get('/', async (req, res) => {
  const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
  const city = req.query.city;

  try {
    const response = await axios.get(
      `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`
    );
    const { main, name } = response.data;
    const temperature = main.temp - 273.15; // Convert from Kelvin to Celsius

    res.send(`The temperature in ${name} is ${temperature.toFixed(1)}°C.`);
  } catch (error) {
    console.error(error);
    res.status(500).send('Error fetching weather data.');
  }
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

Replace YOUR_OPENWEATHERMAP_API_KEY with your OpenWeatherMap API key.

  1. Creating the Screenly Edge App:

Create a new directory called edge-apps inside the weather-app directory:

mkdir edge-apps
cd edge-apps

Next, create a new directory called weather inside edge-apps:

mkdir weather
cd weather

Create a new file called screenly.yml in the weather directory and add the following content:

---
name: Weather App
description: A simple weather app that displays the current temperature and weather conditions for a given city.
version: 1.0.0

assets:
  static:
    - .

scripts:
  start: node ../app.js

Create a new file called index.html in the weather directory and add the following content:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
  </head>
  <body>
    <h1>Weather App</h1>
    <input type="text" id="city" placeholder="Enter city name" />
    <button onclick="getWeather()">Get Weather</button>
    <div id="weather"></div>

    <script>
      async function getWeather() {
        const city = document.getElementById('city').value;
        const response = await fetch(`/?city=${city}`);
        const data = await response.text();
        document.getElementById('weather').innerHTML = data;
      }
    </script>
  </body>
</html>

Create a new file called package.json in the weather directory and add the following content:

{
  "name": "weather",
  "version": "1.0.0",
  "scripts": {
    "start": "node ../app.js"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "express": "^4.17.3"
  }
}
  1. Building the Screenly Edge App:

Build the Screenly Edge App using Docker. Create a new file called Dockerfile in the weather directory and add the following content:

FROM node:14

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 80
CMD ["npm", "start"]

Create a new file called Procfile in the weather directory and add the following content:

web: node app.js

Build the Docker image:

docker build -t weather-app .
  1. Testing the Screenly Edge App:

To test the Screenly Edge App locally, you can use the Screenly Playground. Install it by following the instructions in the official documentation.

Once installed, create a new playground project and add the weather-app directory to it. Start the playground and navigate to http://localhost:8080/playground/projects/{your-project-name}/weather/index.html in your browser. Enter a city name and click the "Get Weather" button to see the current temperature and weather conditions.

  1. Deploying the Screenly Edge App:

To deploy the Screenly Edge App, follow the instructions in the official documentation.

Tests:

To verify the answer, you can perform the following tests:

  1. Check that the Node.js project can fetch weather data from OpenWeatherMap API.
  2. Check that the Screenly Edge App can be built using Docker.
  3. Check that the Screenly Edge App can be run locally using the Screenly Playground.
  4. Check that the Screenly Edge App can be deployed to a Screenly device.
  5. Check that the Screenly Edge App displays the current temperature and weather conditions for a given city.