DEV Community: Michael Scharl

How I created my first MagicMirror² module with Typescript

Michael Scharl — Thu, 22 Aug 2019 21:30:01 +0000

I recently created my first MagicMirror² module. Now I want to "talk" about how I did it.

📦 The Build Tools

As with most of my little side projects, I started from scratch by creating my build toolkit. I usually create a Webpack config install all the loaders and start building. This time I wanted to try rollup, one of the tools I had on my "I want to check this out when I have time"-list. The setup was quite simple and I like the fact that you can create multiple entries and outputs with different plugins that handle you code generation. This is ideal for this project since I want to create the core module file wich is targeted for the browser while the helper module is targeted for a node environment. In the end my config ended up looking like this.

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript';
import pkg from './package.json';

export default [
    /**
     * The core module file
     * Written in Typescript and bundled with all dependencies.
     */
    {
        input: './src/MMM-edgerouter-throughput.ts',
        plugins: [
            typescript(),
            resolve(),
            commonjs(),
        ],
        output: {
            file: './MMM-edgerouter-throughput.js',
            format: 'iife',
        },
    },
    /**
     * The module helper file
     * Written in Typescript and only compiled to be used within node.
     */
    {
        input: './src/node_helper.ts',
        plugins: [
            typescript(),
        ],
        external: ['node_helper', ...Object.keys(pkg.dependencies)],
        output: {
            file: './node_helper.js',
            format: 'umd',
        },
    },
]

For a more convenient use I usually create three npm scripts for compiling my code. watch to continuously compile my code while developing, dev to build everything once for developing/testing and build to create a production ready package.

{
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c --sourcemap=inline",
    "watch": "npm run dev -- --watch"
  }
}

🏗️ The Development Environment

To ensure a fluid and easy development process I installed MagicMirror on my machine to be used in the "server-only" mode. This allows me to add every module I create as a symlink. I also created a symlink in my projects directory to the node_helper modules folder. This is not mandatory but helps my IDE figuring out what I mean when I include the node_helper.

.
├── MMM-edgerouter-throughput
│   └── …
├── MMM-oebb-station-board
│   └── …
├── …
├── MagicMirror
│   ├── …
│   └── modules
│       ├── MMM-edgerouter-throughput -> ../../MMM-edgerouter-throughput
│       ├── MMM-oebb-station-board -> ../../MMM-oebb-station-board
│       ├── …
│       └── node_modules
└── node_modules -> MagicMirror/modules/node_modules

📘 Using Typescript

To be honest, it's not the best possible integration. The MagicMirror repository includes a module-types.ts file, containing the most important types, which I extended a little to fit my needs. A deeper integration, like being able to get correct typings/autocompletion for the this object in functions, is not available. If I find myself using it more in the future, I may look into improving this.

Beside that it works without any problems and I feel like Typescript is giving me a more robust and worriless development experience in the long run. In the end it just gets compiled to pure Javascript before being loaded into the MagicMirror. Those files need to be inside the root folder. Therefore I decided to put the Typescript files into a src folder, for a more obvious separation.

✋ Any questions.

If you have any question regarding my process or the like, feel free to ask me in the comments!

I wrote my first MagicMirror² Module

Michael Scharl — Thu, 15 Aug 2019 19:23:39 +0000

I heard about MagicMirror a while ago. I always wanted to build one myself but like all of my side projects it got swallowed by everything more important than a mirror that tells me I look pretty. I then didn't think about it for a long time. But I've got some spare time lately and the idea popped back into my head. I started looking into the repo and documentation because I was curios how it evolved. And then I found the list of 3rd party modules. I scrolled through it and was blown away by the amount of different tools the community created. It's amazing to see a lot of useful, funny or even trivial modules and keeping in mind that there is at least one person using it on his or her mirror.

So I thought the best way to start this Project is to create my own first module. Since i recently had a lot of troubles with my internet connection due to the fact that my provider was bought and I was switched to the new Providers network, I decided to create a module that show the current bandwidth throughput on my router. I also find it somewhat amusing to watch those numbers while someone at home is browsing the web or watching Netflix.

At first I had to find out how to fetch those numbers from my Ubiquity EdgeRouter. It took me some time but in the end it wasn't that hard to do via the command line interface. I then started reading the MagicMirror documentation and developing the module. While I did not expect it to be difficult, it was even easier than I thought. Kudos to Michael Teeuw (creator of the MagicMirror) for creating this awesome Platform! I can only recommend checking it out yourself.

I plan on writing a little more in-depth post on how I created the module. I even created a second one while writing this post. Until then you can checkout the code itself.

mscharl / MMM-edgerouter-throughput

A MagicMirror² Module to show the Interface throughput of an Ubiquity EdgeRouter

EdgeRouter Throughput

A MagicMirror² Module to show the interface throughput of an Ubiquity EdgeRouter.

The Module uses SSH to connect to the router and reads the network throughput from /sbin/ifstat.

Installation

Clone the Repo into your MagicMirror modules folder git clone git@github.com:mscharl/MMM-edgerouter-throughput.git
Install some node dependencies cd MMM-edgerouter-throughput && npm install --production
Configure and enjoy

Configuration

Property	Type	Required	Default
`gateway`	`string`	✔︎	The IP Address of your EdgeRouter
`username`	`string`	✔︎	The username of your EdgeRouter with SSH access.
`password`	`string`	✔︎	The password of your EdgeRouter with SSH access.
`interface`	`string`	✔︎	The interface to display on the mirror.
`title`	`string`	`undefined`	An optional title to display on the mirror.
`showInterfaceName`	`boolean`	`false`	Whether to show the name of the interface or not.

Compatibility

I developed this module based on my EdgeRouter X with nothing additionally installed.

I can't guarantee that it will work on other…

View on GitHub

Let's get started 🎉

Michael Scharl — Mon, 31 Dec 2018 15:24:46 +0000

It was at the beginning of 2018 when I started as a Senior Web Developer at a company that just expanded to Vienna and was looking for a new Development-Team. I was very surprised when I came in on my first day as a "Web Developer" and was asked if I knew how to do iOS-Apps with Swift. This was a very welcome surprise since I wanted to dig deeper into Swift and iOS-Development for some time. After that, I did some support work for active projects until the Team in Vienna was big enough to act on its own with our own Projects. At the moment we focus on developing Online-Shops and Shop-Like Apps for clients with an existing Inventory management software. An interesting and sometimes very challenging task.

My new job not only opened a lot of new possibilities but also offered me a lot more free time. After I settled in, I started to collect Ideas for side-projects but I never managed to start them and a lot of ideas were never written down. For 2019, this has to change!

This is, for now, the main reason I created an account on dev.to.

Michael ScharlFollow

I want to create some kind of Developer-Dairy where I collect ideas and share experiences with anyone how is interested. In the worst case, I have at least a place to write everything down.

I'll try my best to write on a regular basis. I'm planning about once a week which sounds very doable. But then again, I tried this for a long time now and have never been successful 😅

I strongly hope that this only happened because I was using the wrong platform. But only time will tell.