Electron Workshop!
Details
Electron (https://electron.atom.io/) is a framework you can use to make desktop applications using javascript. You may have already used an Electron app if you have the Slack app or the text editor Atom. With electron, making a simple desktop application is as easy as making a simple web application. Learn to make your own Electron app in this 2-3 hour workshop :D
Electron provides a set of cross-platform APIs (https://github.com/electron/electron-api-demos) you can use to interact with the desktop computer. You can use these to have an icon in the tray/menubar, to display notifications, register keyboard shortcuts, and much more. An Electron application has a node “server” running locally doing most of the work, and often additionally a browser process running locally to display things prettily.
No node experience required, but basic javascript experience would be helpful. If you want to play with Node ahead of time anyway (or brush up on your Javascript), I'd recommend NodeSchool's two command-line courses: Javascripting (https://github.com/workshopper/javascripting) and LearnYouNode (https://github.com/workshopper/learnyounode). If you'd enjoy reading/skimming a book, I might recommend Eloquent Javascript (http://eloquentjavascript.net/) (free to read online).
Scenario / User Story
You work remotely. When pair programming or video chatting online, sometimes the connection gets bad. You're never sure if it's your side or their side having issues. Sometimes you smartly have a terminal open and have `ping google.com` running - then you can tell whether your connection is good! You'd love it if:
- You could tell at a glance (without an additional terminal window) whether your ping is currently good or bad
- You could get a notification when your wifi goes out, or comes back
Our Project
In this workshop, you will create from start to finish a tray icon that will display whether or not you are currently connected to the internet. A node process inside of the Electron app will ping google.com every second. We will then:
- Use the tray api to change the app’s icon to reflect the current state
- Display a notification when the internet appears to go up or down
You can see two example applications like this, here:
https://github.com/groeneveld/am-i-connected
https://github.com/caseywatts/electron-ping
Bring
A laptop, with:
• Node installed. The node installer from their website (https://nodejs.org/en/) is how I recommend installing if you don't already have it.
• git (https://help.github.com/articles/set-up-git/), and a github (https://github.com/)account
• Chrome