I was looking for an app to display the upcoming public transit departures from the station next to my house, in my smart home user interface. Not having found any software with the desired functionality, I developed my own. Today I would like to present to you berlin-departure-board and share some learnings along the way of making my first Vue.js project.
Smart Home System Setup
Let me introduce my smart home system first. In the last year I integrated all my smart home devices into one system running on OpenHAB (a fantastic project, do make sure to check it out if you haven’t heard of it yet!). It is an open-source protocol-agnostic smart home server which allows you to integrate myriads of different devices communicating with open and proprietary protocols alike through plugins (aka bindings). OpenHAB can run on a Raspberry Pi without any cloud backup, so it is a cheap, highly configurable and privacy-aware option to run your smart home without uploading data into the Internet.
Anything that has been implemented as a binding, can be integrated in an OpenHAB instance. OpenWeatherMap, Amazon Alexa, Google Text-To-Speech, Roomba, Next — are just a few of hundreds of available open-source bindings. But there was no binding for my application: a list of upcoming departures from the nearest station in Berlin.
Since OpenHAB UI runs on an iPad in our hall, I had a choice of either developing a binding and integrating it directly in the OpenHAB UI, or developing my own web app and running it standalone on the same iPad. I vouched for the second option in order to have more control over the UI appearance. I wanted the departure board to look like a typical tableau and also be usable outside of OpenHAB ecosystem, e.g. on mobile phones or laptops.
- A web page consists of a hierarchy of (possibly nested) components. Each component knows how to render itself in HTML. An application entry point is
- Sass is preferred over plain CSS. Sass extends the CSS language, allowing among other pretty perks, to define and use variables, allowing for the creation of themes and re-use of colors, fonts etc. inside your CSS code across the components.
- A web app can be built into a static web page, but not necessarily. It can be served online (similar to Python’s Flask or Django) by a web server. A typical JS web server is node.js. It is incredibly easy to deploy a JS application to a cloud server (e.g. Heroku) running node.js, since the remote server needs only to execute one
- Framework documentation is dazzling. It was easy to find tutorials and docs to pretty much anything I needed.
At first launch, the user is asked to search for a station by its name. Changes to the parameters are applied immediately, there is no “save” button. The settings are persisted using the browser’s local storage, so that on the second start the app still remembers the station name.
departure-board queries BVG (Berlin’s public transport company) transit departures and relies on the availability of the ReST API server, generously provided by transport.rest — a fabulous project that aims to have a unified way of querying public transport data from various service providers, so make sure to check it out and give it your stars.
Inspired by my first contact with Vue.js, I already started working on a new smart home UI running in React. Keep watching this blog, an update is underway!