June 17, 2017

My first electron app : Blinker

A week ago, I discovered a very useful website and I thought I should make it an application. This is the website : http://www.blynker.com/.
The principle is simple : it reminds you to take your eyes away from your computer every 20 minutes. So here is Blinker.

I do a lot of stuff on my computer and I don't always take a break to rest. We can see it like a pomodoro, but not just when you want to concentrate on something.

Planning the application

The idea is simple : Every x (20) minutes you notify the user that he should take a break. 20 seconds later, he can go back to work.

The technology : I do a lot of Javascript so I decided to go with a tool that could help me create my native application in Javascript. With no doubt I decided to go with Electron. Many applications, including Slack, Atom, VS Code, are built on top of Electron. And it has the advantage to help you build cross platform applications.

Creating the application

Electron provides a quick start to help you understand the concept.

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies and run
$ npm install && npm start

Blinker is a "window less" application (as it just shows a tray icon) so I deleted the index.html and renderer.js files.

Electron provides a Tray item that helps you add icons and context menus to the system’s notification area.

const electron = require('electron')
const { app, Tray, Menu, BrowserWindow } = require('electron')

Here is the list of dependencies :

node-notifier : to display system notifications. I first used the HTML5 native Notification API, but it didn't work as our application doesn't run in a window.

notifier.notify({
  title: 'Startup status changed',
  message: launchOnStartup
    ? 'You will have to launch the application every time you log in'
    : 'Great! Application will launch on system startup',
  icon: path.join(__dirname, 'icons/eye.png'),
  contentImage: '',
  sound: playSound, // true of false
})

auto-launch : to launch application on startup ;)

const appAutoLauncher = new AutoLaunch({
  name: 'Blinker',
  isHidden: true,
  mac: {
    useLaunchAgent: true,
  },
})

electron-store : to save application specific configuration (like sound, autostart)

const store = new Store({
  defaults: {
    config: {
      launchOnStartup: true,
      playSound: true,
    },
  },
})
const config = store.get('config')

I have released the first version for Linux and MacOS. If you are on windows, you can just checkout the code and build for windows.

Feel free to checkout the code on github, submit pull requests or open issues if something is not working as expected.

Cheers.