├── README.md
├── assets
    ├── body.png
    └── header.png
├── docker-compose.yml
├── express
    ├── Dockerfile.template
    ├── package.json
    ├── public
    │   ├── header.png
    │   ├── index.html
    │   ├── main.js
    │   └── styles.css
    ├── server.js
    └── views
    │   └── index.ejs
└── sensor
    ├── Dockerfile.template
    ├── src
        └── main.py
    └── start.sh


/README.md:
--------------------------------------------------------------------------------
 1 | ![](https://github.com/balena-io-playground/express-mongo-sample/blob/master/assets/header.png?raw=true)
 2 | 
 3 | # Express and MongoDB example project
 4 | 
 5 | To demonstrate the use of a 64-bit container, we’ve developed a sample multi-container project that uses a few different technologies. The main idea is to plot a live chart containing the temperature and humidity of any city in the world. 
 6 | 
 7 | ### What you will need:
 8 | - A download of the project from [GitHub](https://github.com/balena-io-playground/express-mongo-sample)
 9 | - Software to flash an SD card ([balenaEtcher](https://balena.io/etcher))
10 | - A free [balenaCloud](https://balena.io/cloud) account to setup and manage the Pi Download and install the [balena CLI tools](https://github.com/balena-io/balena-cli/blob/master/INSTALL.md) - to be installed on your computer, allowing you to install the project code on the Raspberry Pi 4.
11 | 
12 | You will also need to [set up environment variables](https://www.balena.io/docs/learn/manage/serv-vars/#environment-and-service-variables) from the balena dashboard:
13 | 
14 | | Name             | Value  
15 | | -----------------|------------------------------------                                   
16 | | CITY_LATLNG     | The code corresponding to the latitude and longitude of the desired city comma separated. Ex: `38.722252,-9.139337`.
17 | | API_KEY | [api key](https://darksky.net/dev) retrieved after signing up at `https://darksky.net`|
18 | | FREQ | Frequency(in minutes) with which to retrieve weather data. |                                   
19 |                     
20 | 
21 | > To get the Lat & Long for your city, you can use [latlong.net](https://www.latlong.net/) and type the name of the desired city, such as Lisbon or London. On the `environment variable`, just combine both information comma separated such as  `38.722252,-9.139337`.
22 | 
23 | ### About the project:
24 | 
25 | The project is divided into three containers:
26 | * A mongoDB database instance with persistent storage, in which we will store all data. 
27 | * A Python 3 application that fetches the weather information from the [Dark Sky](https://darksky.net/dev) API and saves it to the database every minute. 
28 | * Node.js, ExpressJS, and VueJS application that fetches the data from the mongo database and displays it in a chart, which is refreshed automatically every minute.
29 | 
30 | ![](https://github.com/balena-io-playground/express-mongo-sample/blob/master/assets/body.png?raw=true)
31 | 
32 | > Note, the express app is based on https://zellwk.com/blog/crud-express-mongodb/
33 | 


--------------------------------------------------------------------------------
/assets/body.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/balena-io-experimental/express-mongo-sample/f1a7c9e297977b56fbb3ff8748be50483de33fa4/assets/body.png


--------------------------------------------------------------------------------
/assets/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/balena-io-experimental/express-mongo-sample/f1a7c9e297977b56fbb3ff8748be50483de33fa4/assets/header.png


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: "2"
 2 | 
 3 | volumes:
 4 |     mongo-data:
 5 | 
 6 | services:
 7 |   mongo:
 8 |     image: arm64v8/mongo
 9 |     restart: always
10 |     volumes:
11 |       - 'mongo-data:/data/db'
12 |     expose:
13 |       - "27017"
14 |   express:
15 |     depends_on:
16 |       - mongo
17 |     build: ./express
18 |     ports:
19 |       - "80:80"
20 |   sensor:
21 |     depends_on:
22 |       - mongo
23 |     build: ./sensor
24 | 


--------------------------------------------------------------------------------
/express/Dockerfile.template:
--------------------------------------------------------------------------------
 1 | FROM balenalib/raspberry-pi-node:11-buster-run
 2 | 
 3 | WORKDIR /usr/src/app
 4 | 
 5 | COPY package.json package.json
 6 | 
 7 | RUN JOBS=MAX npm install --production --unsafe-perm && npm cache verify && rm -rf /tmp/*
 8 | 
 9 | COPY . ./
10 | 
11 | 
12 | CMD ["npm", "start"]


--------------------------------------------------------------------------------
/express/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "crud-express-mongo",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "node server.js",
 8 |     "dev": "nodemon server.js"
 9 |   },
10 |   "author": "",
11 |   "license": "ISC",
12 |   "dependencies": {
13 |     "body-parser": "^1.14.2",
14 |     "ejs": "^2.3.4",
15 |     "express": "^4.13.3",
16 |     "mongodb": "^2.1.4"
17 |   },
18 |   "devDependencies": {
19 |     "nodemon": "^1.8.1"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/express/public/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/balena-io-experimental/express-mongo-sample/f1a7c9e297977b56fbb3ff8748be50483de33fa4/express/public/header.png


--------------------------------------------------------------------------------
/express/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <title>balena + mongoDB</title>
 6 |     <link rel="stylesheet" href="styles.css" />
 7 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 8 |   </head>
 9 |   <body class="d-flex flex-column h-100">
10 |     <main role="main" class="flex-shrink-0">
11 |     <div class="container">
12 |       <img src="header.png" style="max-width: 100%;">
13 |       <section>
14 |         <div id="app">
15 |           <p> 
16 |             <span v-show="refreshing" class="float-right text-light bg-secondary px-2 py-1">Refreshing ...</span>
17 |               <b>Location:</b> {{ cityName }} <br>
18 |               <b>Lat:</b> {{ cityLat }} <b>Long:</b> {{ cityLong }} <br>
19 |               <b>Time:</b>  {{ currentTime }}
20 |           </p>
21 | 
22 |           <line-chart :options="options" :chart-data="datacollection"/>
23 |         </div>
24 |       </section>
25 |       <!-- <button @click="loadData">Update Chart</button> -->
26 |     </div>
27 |   </main>
28 | 
29 |     <footer id="sticky-footer" class="footer mt-auto py-3">
30 |         <div class="container text-center">
31 |           <small>
32 |             This is a sample project brought you by <a href="https://balena.io" target="_blank">balena</a> to demonstrate a multi container application using python for data gathering, <a href="https://www.mongodb.com/" target="_blank">mongoDB</a> for storing the data and expressJS with VueJS to display information. This project was created to demonstrate the capabilities of a 64-bit balena container running on a <b>Raspberry Pi 4</b>. Check out the announcement <a href="https://balena.io/blog/balena-releases-first-fully-functional-64-bit-os-for-the-raspberry-pi-4">here</a>.
33 |           </small>
34 |         </div>
35 |       </footer>
36 | 
37 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
38 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
39 |     <script src="https://unpkg.com/vue-chartjs@2.8.7/dist/vue-chartjs.full.min.js"></script>
40 |     <script src="main.js"></script>
41 | 
42 |   </body>
43 | </html>


--------------------------------------------------------------------------------
/express/public/main.js:
--------------------------------------------------------------------------------
  1 | Vue.component("line-chart", {
  2 |   extends: VueChartJs.Line,
  3 |   mixins: [VueChartJs.mixins.reactiveProp],
  4 |   props: ["options"],
  5 |   mounted() {
  6 |     this.renderChart(this.chartData, this.options);
  7 |   }
  8 | });
  9 | 
 10 | var vm = new Vue({
 11 |   el: "#app",
 12 |   data: function() {
 13 |     return {
 14 |       refreshing: false,
 15 |       options: {
 16 |         responsive: true,
 17 |         maintainAspectRatio: false,
 18 |         scales: {
 19 |           xAxes: [
 20 |             {
 21 |               type: "time",
 22 |               distribution: "series",
 23 |               ticks: {
 24 |                 source: "data",
 25 |                 autoSkip: true
 26 |               },
 27 |               time: {
 28 |                 unit: "minute",
 29 |                 stepSize: 2,
 30 |                 tooltipFormat: "lll",
 31 |                 displayFormats: {
 32 |                   hour: "HH:mm:ss"
 33 |                 }
 34 |               },
 35 |               display: true
 36 |             }
 37 |           ],
 38 |           yAxes: [
 39 |             {
 40 |               id: "Temperature",
 41 |               labelString: "Temperature",
 42 |               type: "linear",
 43 |               position: "left",
 44 |               ticks: {
 45 |                 max: 50,
 46 |                 min: 0,
 47 |                 callback: function(value, index, values) {
 48 |                   return value + "°C";
 49 |                 }
 50 |               }
 51 |             },
 52 |             {
 53 |               id: "Humidity",
 54 |               labelString: "Humidity",
 55 |               type: "linear",
 56 |               position: "right",
 57 |               ticks: {
 58 |                 max: 100,
 59 |                 min: 0,
 60 |                 callback: function(value, index, values) {
 61 |                   return value + "%";
 62 |                 }
 63 |               }
 64 |             }
 65 |           ]
 66 |         }
 67 |       },
 68 |       datacollection: {},
 69 |       cityName: "",
 70 |       cityLat: "",
 71 |       cityLong: "",
 72 |       currentTime: null
 73 |     };
 74 |   },
 75 |   created() {
 76 |     this.loadData();
 77 |   },
 78 |   mounted() {
 79 |     this.refresh();
 80 |   },
 81 |   methods: {
 82 |     loadData() {
 83 |       console.log("Updating content");
 84 |       fetch("/data")
 85 |         .then(res => {
 86 |           return res.json();
 87 |         })
 88 |         .then(data => {
 89 |           let labels = [];
 90 |           let tempData = [];
 91 |           let humidData = [];
 92 | 
 93 |           data.map(point => {
 94 |             labels.push(point.time);
 95 |             tempData.push(point.weather.currently.temperature.toFixed(2));
 96 |             humidData.push(point.weather.currently.humidity.toFixed(2) * 100);
 97 |           });
 98 | 
 99 |           /* Get last data points */
100 |           this.cityName = data[data.length - 1].weather.timezone;
101 |           this.cityLat = data[data.length - 1].weather.latitude;
102 |           this.cityLong = data[data.length - 1].weather.longitude;
103 |           this.currentTime = data[data.length - 1].time;
104 | 
105 |           this.datacollection = {
106 |             labels: labels,
107 |             datasets: [
108 |               {
109 |                 label: "Temperature",
110 |                 yAxisID: "Temperature",
111 |                 backgroundColor: "#f87979",
112 |                 data: tempData,
113 |                 fill: false
114 |               },
115 |               {
116 |                 label: "Humidity",
117 |                 yAxisID: "Humidity",
118 |                 backgroundColor: "#348ceb",
119 |                 data: humidData,
120 |                 fill: false
121 |               }
122 |             ]
123 |           };
124 |         });
125 |     },
126 |     refresh() {
127 |       /* update data every 2 minutes */
128 | 
129 |       setInterval(() => {
130 |         this.refreshing = true;
131 |         this.loadData();
132 |         setTimeout(() => {
133 |           this.refreshing = false;
134 |         }, 3000);
135 |       }, 60000);
136 |     }
137 |   }
138 | });
139 | 


--------------------------------------------------------------------------------
/express/public/styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/balena-io-experimental/express-mongo-sample/f1a7c9e297977b56fbb3ff8748be50483de33fa4/express/public/styles.css


--------------------------------------------------------------------------------
/express/server.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const app = express();
 3 | const bodyParser = require("body-parser");
 4 | const MongoClient = require("mongodb").MongoClient;
 5 | 
 6 | var db;
 7 | 
 8 | MongoClient.connect(
 9 |   `mongodb://mongo:27017/sensor-data`,
10 |   (err, database) => {
11 |     if (err) return console.log(err);
12 |     db = database.db("sensorData");
13 |     app.listen(process.env.PORT || 80, () => {
14 |       console.log("listening on 80");
15 |     });
16 |   }
17 | );
18 | 
19 | app.set("view engine", "ejs");
20 | app.use(bodyParser.urlencoded({ extended: true }));
21 | app.use(bodyParser.json());
22 | app.use(express.static("public"));
23 | 
24 | app.get("/", (req, res) => {
25 |   res.sendFile("index.html");
26 | });
27 | 
28 | app.get("/data", (req, res) => {
29 |   db.collection("data")
30 |     .find()
31 |     .sort({ $natural: -1 })
32 |     .limit(30)
33 |     .toArray((err, result) => {
34 |       if (err) {
35 |         console.log(err);
36 |         res.status(404).send();
37 |         return;
38 |       }
39 |       res.send(result);
40 |     });
41 | });
42 | 
43 | 


--------------------------------------------------------------------------------
/express/views/index.ejs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>MY APP</title>
 6 |   <link rel="stylesheet" href="styles.css">
 7 | </head>
 8 | <body>
 9 |   <h1>May Node and Express be with you.</h1>
10 | 
11 |   <ul class="quotes">
12 |   <% for(var i=0; i<quotes.length; i++) {%>
13 |     <li class="quote">
14 |       <span><%= quotes[i].name %></span>
15 |       <span><%= quotes[i].quote %></span>
16 |     </li>
17 |   <% } %>
18 |   </ul>
19 | 
20 |   <h2>Add a quote</h2>
21 | 
22 |   <form action="/quotes" method="POST">
23 |     <input type="text" placeholder="name" name="name">
24 |     <input type="text" placeholder="quote" name="quote">
25 |     <button type="submit">Submit</button>
26 |   </form>
27 | 
28 |   <div>
29 |     <h2>Replace last quote written by Master Yoda with a quote written by Darth Vadar</h2>
30 |     <button id="update"> Darth Vadar invades! </button>
31 |   </div>
32 | 
33 |   <div>
34 |     <h2>Delete Darth Vadar's first quote</h2>
35 |     <button id="delete"> Delete first Darth Vadar quote </button>
36 |   </div>
37 | 
38 |   <script src="main.js"></script>
39 | 
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/sensor/Dockerfile.template:
--------------------------------------------------------------------------------
 1 | 
 2 | FROM balenalib/%%BALENA_MACHINE_NAME%%-python:3.7-buster-run
 3 | 
 4 | # Install packages
 5 | RUN pip3 install --upgrade \
 6 | 	pymongo \
 7 | 	request
 8 | 
 9 | # Set our working directory
10 | WORKDIR /usr/src/app
11 | 
12 | # This will copy all files in our root to the working  directory in the container
13 | COPY . ./
14 | 
15 | # main.py will run when container starts up on the device
16 | CMD ["bash","start.sh"]


--------------------------------------------------------------------------------
/sensor/src/main.py:
--------------------------------------------------------------------------------
 1 | import time
 2 | import json
 3 | import os
 4 | import sys
 5 | from datetime import datetime
 6 | from pymongo import MongoClient
 7 | from urllib.request import urlopen
 8 | 
 9 | 
10 | # readWeather uses the api-key and city code to fetch the json data for the current weather information
11 | def read_weather(code, apikey):
12 |     url =  "https://api.darksky.net/forecast/"+apikey+"/"+code+"?exclude=daily,hourly,flags&units=si"
13 | 
14 |     meteo = urlopen(url).read()
15 |     meteo = meteo.decode('utf-8')
16 |     weather = json.loads(meteo)
17 | 
18 |     return weather
19 | 
20 | # Fetch environment data
21 | try:
22 |     CITY = os.environ["CITY_LATLNG"]
23 |     API_KEY = os.environ["API_KEY"]
24 | except KeyError:
25 |     print("Please set environment variables")
26 |     sys.exit()
27 | 
28 | # Set refresh frequency
29 | if os.environ.get("FREQ") is None:
30 |     FREQ = 5
31 | else:
32 |     FREQ = int(os.environ["FREQ"])
33 |     
34 | client = MongoClient('mongo', 27017)
35 | 
36 | # Code start
37 | print("Starting")
38 | print("City: %s " % (CITY))
39 | print("Frequency: %d mins " % (FREQ))
40 | 
41 | with client:
42 |     db = client.sensorData
43 |     col = db.data
44 | 
45 |     # Read data and save to database
46 |     while True:
47 | 
48 |         current_time = datetime.now()
49 |         weather = read_weather(CITY, API_KEY)
50 | 
51 |         read = {"time": current_time, "weather": weather}
52 |         x = col.insert_one(read)
53 | 
54 |         print("Data inserted...")
55 | 
56 |         # Update database every x minute
57 |         time.sleep(60 * FREQ)
58 | 


--------------------------------------------------------------------------------
/sensor/start.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | python src/main.py
 4 | 
 5 | if [ -z "${API_KEY}" ]; then
 6 |   echo "API_KEY is not set"
 7 | fi
 8 | 
 9 | if [ -z "${CITY_LATLNG}" ]; then
10 |     echo "CITY_LATLNG is not set"
11 | fi
12 | 
13 | if [ -z "${FREQ}" ]; then
14 |     echo "FREQ is not set"
15 | fi
16 | 
17 | while : ; do
18 | echo "Idling..."
19 | sleep 600
20 | done
21 | 


--------------------------------------------------------------------------------