Sensor Panel

Sensor Panel web app (https://sensor-panel.web.app) is a proof of concept app to monitor data sent by a network of Internet of Things (IoT) sensors (currently simulated with a Google Cloud scheduled function that runs every 3 minutes).

System architectural concept

• simple cloud deployment pipelines (Firebase)
  • single repository for backend and frontend
• shared Typescript models between backend and frontend to simplify iterative changes and API changes
  • backend as lambda function
• cloud data store, not database
  • self-maintaining with scheduled functions

My considerations for choosing this platform

Technologies

Front-end

• Typescript
• React single page app (bootstrapped with create-react-app)
• D3.js data visualisation library
• Located in repository root folder .

Back-end

• Typescript
• Express "server" as Firebase Cloud Function https endpoint
• Located in folder ./functions

Data persistence

• Firebase Firestore

Running locally

There are two steps to run the project locally. Both steps have two options to choose from.

	Option A	Option B
Step 1: Dependencies	Docker container	Linux / MacOS native
Step 2: Environment	Development mode	Production mode

Step 1A: Start the development Docker container

The development environment is containerised for convenience (see Dockerfile and docker-compose). Dockerfile is based on https://github.com/AndreySenov/firebase-tools-docker image, but with non-alpine Linux so the shell commands would execute faster in the container.

Start the development container with these commands:

• docker-compose up -d
• docker-compose exec emulators bash
• In the opened bash terminal, continue with the development mode or production mode commands.

Step 1B: Install the dependencies manually (Linux / MacOS)

• Install Node (version 12, specifically needed for Cloud Functions)
• Install NPM package firebase-tools globally (for version, please see VERSION build argument in docker-compose file)
• Install a Java Runtime Environment (for version, see Dockerfile)
• Run firebase setup:emulators:firestore to install emulators
• In your terminal, continue with the development mode or production mode commands.

Step 2A: Run in development mode

Run the following two command sets to get started

FE

• npm install to install the depedencies
• npm start to start webpack development server
• navigate to http://localhost:3000 to see the FE
  • changes to files in src folder will cause the FE to reload
  • requests to non-static paths (example GET /api/measurements) are proxied to http://localhost:5001/sensor-panel/us-central1/app, which is the address for development BE

BE

• cd functions
• npm install to install the dependencies
• npm run serve to start the firebase functions and firestore emulator
• BE is deployed to http://localhost:5001/sensor-panel/us-central1/
  • Changes to files in functions/src will not be active until npm run serve is run again
  • Function logs are accessible at http://localhost:4000/logs
• Firestore Emulator UI is accessible at http://localhost:4000/firestore

Step 2B: Run in production mode

The production command set builds the FE and BE production versions and emulates the whole environment (FE, BE, Firestore) with some prefilled data in Firestore.

• npm install && cd functions && npm install && cd .. to install the dependencies
• npm run build && cd functions && npm run build && cd .. && firebase emulators:start --import="./emulator-data" --only functions,firestore,hosting
• FE is deployed to http://localhost:5000
• BE is deployed to http://localhost:5001/sensor-panel/us-central1/
  • Function logs are accessible at http://localhost:4000/logs
• Firestore Emulator UI is accessible at http://localhost:4000/firestore

API info

POST /api/sink

Accepts application/json in format as defined here.