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.
- 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.
- 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"
}
}
- 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 .
- 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.
- 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:
- Check that the Node.js project can fetch weather data from OpenWeatherMap API.
- Check that the Screenly Edge App can be built using Docker.
- Check that the Screenly Edge App can be run locally using the Screenly Playground.
- Check that the Screenly Edge App can be deployed to a Screenly device.
- Check that the Screenly Edge App displays the current temperature and weather conditions for a given city.
