DEV Community: Francisco Amorim

React: Alarm Window

Francisco Amorim — Fri, 07 Aug 2020 18:54:15 +0000

Heya!

Previously in this series:

Part 1: Setup of Electron + React w/ Typescript;
Part 2: Created the Tray icon with menu;

Part 3: The Alarm window

In this part we will create the App Manager and the Alarm Window, first we will create the App Manager, after setup the Alarm window in electron and than we will start to develop our view in React.

Setup the App Manager

Create a file called AppManager.ts under the electron folder, after let's create the class AppManager where we will be able to store the electon elements (Window's and Tray).

./src/electron/AppManager.ts

import { AlarmWindow } from './AlarmWindow';
import { TrayMenu } from './TrayMenu';

export type ManagerTypes = AlarmWindow;

class AppManager {
  private trayMenu!: TrayMenu;
  private windowManager: Map<string, ManagerTypes> = new Map();

  setTray(tray: TrayMenu): void {
    this.trayMenu = tray;
  }

  getTray(tray: TrayMenu): TrayMenu {
    return this.trayMenu;
  }

  setWindow(name: string, element: ManagerTypes): void {
    this.windowManager.set(name, element);
  }

  getWindow(name: string): ManagerTypes {
    const element = this.windowManager.get(name);
    if (element) {
      return element;
    } 
    throw new Error(`[AppManager] - Element with name ${name} doesn't exist!`)
  }

  deleteWindow(name: string): void {
    this.windowManager.delete(name)
  }
}

export const appManager = new AppManager();

Now let´s break it down!

In this piece of code we are importing the classes from our TrayMenu and our AlarmWindow (Not yet created!) to create a types.

import { AlarmWindow } from './AlarmWindow';
import { TrayMenu } from './TrayMenu';

export type ManagerTypes = AlarmWindow;

...

Here we are creating the variable to store tray and other to store our windows, and method to get, set and delete the windows.

...
class AppManager {
  private trayMenu!: TrayMenu;
  private windowManager: Map<string, ManagerTypes> = new Map();

  setTray(tray: TrayMenu): void {
    this.trayMenu = tray;
  }

  getTray(tray: TrayMenu): TrayMenu {
    return this.trayMenu;
  }

  setWindow(name: string, element: ManagerTypes): void {
    this.windowManager.set(name, element);
  }

  getWindow(name: string): ManagerTypes {
    const element = this.windowManager.get(name);
    if (element) {
      return element;
    } 
    throw new Error(`[AppManager] - Element with name ${name} doesn't exist!`)
  }

  deleteWindow(name: string): void {
    this.windowManager.delete(name)
  }
}
...

We instantiate this class a single time, because we don't need more than one and because we need to access it from multiple files.

export const appManager = new AppManager();

Setup the Alarm Window

Create a file and name it AlarmWindow.ts under the electron folder. The next code we already learned about it in one of the previous episodes.

./src/electron/AlarmWindow.ts

import { app, BrowserWindow } from 'electron';

export class AlarmWindow {
  public readonly window: BrowserWindow;

  constructor() {
    this.window = this.createWindow();
  }

  createWindow(): BrowserWindow {
    const window = new BrowserWindow({
      width: 300,
      height: 600,
      show: false, // This will the window hidden in launch time.
      webPreferences: {
        nodeIntegration: true
      }
    })

    // Load our index.html
    window.loadURL(`file://${app.getAppPath()}/index.html`)
    return window;
  }
}

If we run our application at this point and click the Tokei button in the Tray Menu we will get the following result.

The Alarm View

Finally we will start using react. In this part of the tutorial we want the view to have a list of all alarms created with the option of turning on and off, we also want a button to add a new one.

Note: I will no post the SCSS in here. I will always leave a link to it.

Create a new following folder structure:

The MainPage should look like this:

./src/app/views/MainPage/MainPage SCSS

import React from 'react';
import './MainPage.scss';
import Toggle from '@/app/componensts/Toggle/Toggle';

type Alarm = {
  label: string;
  message: string;
  time: string;
}

const MainPage = () => {
  // This will be deleted later,
  // is just used to mock some data.
  const mockAlarms = [
    {
      label: 'Alarm',
      message: 'Some text message!',
      time: '10:50',
    },
    {
      label: 'Alarm 2',
      message: 'Some text message!',
      time: '07:50',
    },
    {
      label: 'Alarm 3',
      message: 'Some text message!',
      time: '18:50',
    },
  ];

  return (
    <div className="main-page">
      <div className="main-page__header">
        <h3> Alarms </h3>
        <button> + </button>
      </div>
      <ul className="alarms-holder">
          {
            mockAlarms.map((alarm: Alarm) => (
              <li className="alarm-item">
                <div>
                  <p className="alarm-item__time"> 
                    { alarm.time} 
                  </p>
                  <p className="alarm-item__label"> 
                    { alarm.label} 
                  </p>
                </div>

                <div className="alarm-item__toggle">
                  <Toggle/>
                </div>
              </li>
            ))
          }
        </ul>
    </div>
  );
}

export default MainPage;

As you can see in the above code, we are importing a component, lets create it:

./src/app/components/Toggle/Toggle SCSS

import React from 'react';
import './Toggle.scss';

type ToggleProps = {
  checked?: boolean;
  handler?: () => void;
}

const Toggle = ({
  handler = () => {},
}: ToggleProps) => {
  return (
    <label className="toggle">
      <input type="checkbox" 
        onChange={handler}
      />
      <span className="slider"></span>
    </label>
  );
}

export default Toggle;

Finally, good to app.ts update it calling the MainPage:

import React from 'react';
import './app.scss';
import MainPage from './views/MainPage/MainPage';

const App = () => {
  return (
    <div className="app">
      <MainPage></MainPage>
    </div>
  );
}

export default App;

If we run our app should look like this:

Conclusion

Now we have everything setup, in the next episode we will create the alarm functionality, the fun will start!!

Repository: Tokei - Part 3 Branch

Part 4 - Alarm Functionality [Coming in September]

Electron: Creating Tray Menu

Francisco Amorim — Fri, 07 Aug 2020 12:13:53 +0000

Heya!

In the previous part we prepared the environment of our application built using Electron and React with Typescript. If you haven't seen it yet, it's better to check Part 1 first.

Part 2: Electron: Tray Menu

In this part we will focus on creating the tray system icon, such as its interaction and menu.

The idea is the application as soon as it is executed open an icon in the system tray.

With the left click we will open a window, in this window we can see every alarm created, and will be able to turn it on and off. We will be able to create new alarms, defining the hour and minutes, giving a name, choosing a sound and also a message. And last we can delete them. 😜

With the right click we will have a quick menu, where we can open the main window, turn alarms on and off directly in this menu and we can also turn off the application.

Let's start to code!! 😎

The Tray Button

We will create a folder called electron inside the src folder, from now on all files that are directed to electron will be created inside this folder. We have also to create our file for the Tray menu, giving the name TrayMenu.ts.
Create an assets folder under src, add an icon for the application, I used a Clock in case you have no ideas (16x16px).

At this point our project must have the following structure:

To create our tray menu, we need to import from Electron the Tray and nativeImage:

.src/electron/TrayMenu.ts



import { app, Tray, Menu, nativeImage } from 'electron';

Why this four? 🤔

app is where the event lifcycle of our applicatin is controled;
Tray is a class used add icons and context menus;
Menu it's a class to create Menu's;
nativeImage will create a native image from a url path, it's necessary to create the tray icon for OSX;

.src/electron/TrayMenu.ts



import { app, Tray, Menu, nativeImage } from 'electron';

export class TrayMenu {
  // Create a variable to store our tray
  // Public: Make it accessible outside of the class;
  // Readonly: Value can't be changed
  public readonly tray: Tray;

  // Path where should we fetch our icon;
  private iconPath: string = '/assets/clock-icon.png';

  constructor() {
    this.tray = new Tray(this.iconPath);
  }
}

As you can see the tray constructor accepts a url path, but we want to create our icon with nativeImage and for that we will create a method that will handle the creation.

.src/electron/TrayMenu.ts



import { app, Tray, Menu, nativeImage } from 'electron';

export class TrayMenu {
  // Create a variable to store our tray
  // Public: Make it accessible outside of the class;
  // Readonly: Value can't be changed
  public readonly tray: Tray;

  // Path where should we fetch our icon;
  private iconPath: string = '/assets/clock-icon.png';

  constructor() {
    this.tray = new Tray(this.createNativeImage());
  }

  createNativeImage() {
    // Since we never know where the app is installed,
    // we need to add the app base path to it.
    const path = `${app.getAppPath()}${this.iconPath}`;
    const image = nativeImage.createFromPath(path);
    // Marks the image as a template image.
    image.setTemplateImage(true);
    return image;
  }
}

Now we just need to instantiate TrayMenu as soon as the application is ready, and for that we will go to the main.ts file to instantiate.

./src/main.ts



import { app, BrowserWindow } from 'electron';
import { TrayMenu } from '@/electron/TrayMenu';

const appElements: any = {
  tray: null,
  windows: []
};

app.on('ready', () => {
  appElements.tray = new TrayMenu();
});

Note: You can delete the createWindow method in it.

At the moment we have created a constant to store the application elements that we need to instantiate. But later we will create a Manager for that.

Why do we need this manager?

For example if we do this:



app.on('ready', () => {
  const tray = new TrayMenu();
});

The icon will disappear, as the garbage collector will delete the references that are in this scope.

Webpack Optimization

We need to install the Webpack Copy Plugin to copy the all assets to our dist folder.

For that run:



npm install copy-webpack-plugin --save-dev

After installing it add the following config to our webpack.config.js:

./webpack.config.js



const electronConfiguration = {
  ...
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src/assets', to: 'assets' },
      ],
    }),
  ],
};

Let's check out our progress,run:



npm start

The Menu

Just as we did to create nativeImage we will create a method to create the menu.

./src/electron/TrayMenu.ts



import { app, Tray, Menu, nativeImage } from 'electron';

export class TrayMenu {

  ...

  constructor() {
    this.tray = new Tray(this.createNativeImage());
    // We need to set the context menu to our tray
    this.tray.setContextMenu(this.createMenu());
  }

  ...

  createMenu(): Menu {
    // This method will create the Menu for the tray
    const contextMenu = Menu.buildFromTemplate([
      {
        label: 'Tokei',
        type: 'normal',
        click: () => { 
          /* Later this will open the Main Window */ 
        }
      },
      {
        label: 'Quit',
        type: 'normal',
        click: () => app.quit()
      }
    ]);
    return contextMenu;
  }
}

Explaining better what each Button will do:

The first one will open the alarms window, when clicking you should open the window but for now it will do nothing;
The 'Quit' button as the label indicates will be to close the application, for that we will execute a function of the application controller to close it;

If you run our application now and click on the icon, the menu will be shown

Conclusion

Right now we have our application running with an Icon tray and the menu.
I hope you are enjoying it, leave your comment on what I should improve! And if you have any doubts, just comment, I will try to answer quickly. 😁

Repository: Tokei

Part 3 - The Alarm Window

Setting Electron + React with Typescript

Francisco Amorim — Thu, 06 Aug 2020 14:52:04 +0000

Heya!

In this tutorial series we will build an Desktop Alarm Widget with Electron and React written in Typescript.

What will we tackle in this series:

Typescript
Electron
React
Webpack

Feature:

Clock
Alarm w/ notification

Part 1: Setting up the project

Start the project

Let's start! First open your terminal in the desired root folder and run the command:

npm init -y

This command will generate the package.json file.

{
  "name": "tokei",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

Typescript Setup

Since we want to write our application with Typescript we need to install it:

npm install typescript --save-dev

After the installation, generate the tsconfig.json, for that run:

tsc --init

We have our project ready to write Typescript 🥳

Electron Setup

Now we need to install Electron and setup everything related to it.

npm install electron --save-dev

Let's create an html file and the entrypoint for electron under src folder. the project structure should look like this:

root
- src/
-------- index.html
-------- main.ts
- package.json

Add the following content to the html file:

./src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

Now the content of the main file of our application.

./src/main.ts

import { app, BrowserWindow } from 'electron';

const createWindow = (): void => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.on('ready', createWindow);

Let's add our first script command in the package.json to run the electron app:

"scripts": {
  "build": "tsc src/main.ts",
  "start": "electron dist/main.js"
}

Webpack Setup

We will use Webpack to optimize and build our application.
Start by installing it.

npm install webpack webpack-cli html-webpack-plugin ts-loader --save-dev

We will create a file to setup the webpack configs for electron, for that create webpack.electron.jsin the root folder:

./webpack.electron.js

const path = require('path');

module.exports = {
  // Build Mode
  mode: 'development',
  // Electron Entrypoint
  entry: './src/main.ts',
  target: 'electron-main',
  resolve: {
    alias: {
      ['@']: path.resolve(__dirname, 'src')
    },
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [{
      test: /\.ts$/,
      include: /src/,
      use: [{ loader: 'ts-loader' }]
    }]
  },
  output: {
    path: __dirname + '/dist',
    filename: 'main.js'
  }
}

Let me explain what this code does.

resolve: {
  alias: {
    ['@']: path.resolve(__dirname, 'src')   
  },
  extensions: ['.tsx', '.ts', '.js'],
},

Now create the webpack.config.js in the root folder, this will consume all necessary configs for our webpack:

./webpack.config.js

const electronConfigs = require('./webpack.electron.js');

module.exports = [
  electronConfigs
];

From now on don't need to navigate folder with '../../', we can use '@' as a starting point in the src folder.

Before:

./src/components/button/button.ts

// Lets import from ./src/services/service1.ts
import Service1 from '../../services/service1';

After:

./src/component1/component1.ts

// Lets import from ./src/services/service1.ts
import stuff from '@/services/service1';

Now update npm script in package.json:

"scripts": {
  "build": "webpack",
  "start": "npm run build && electron dist/main.js"
}

React Setup

For our renderer we will install React and all dependencies necessary for typescript.

npm install --save-dev react react-dom @types/react @types/react-dom

Create the react entrypoint as renderer.ts:

./renderer.ts

import React from 'react';
import ReactDOM from 'react-dom';
import App from '@/app/app';

ReactDOM.render(<App />, document.getElementById('root'));

As you can see we are importing the App Component, but we don't have it yet, let code it!

./app/app.ts

import React from 'react';

const App = () => {
  return (
    <div className="app">
      <h1>I'm React running in Electron App!!</h1>
    </div>
  );
}

export default App;

Do you remember the tsconfig.json file? 🤔 Let´s add two options to it:

{
  "compilerOptions": {
    ...
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
  }
}

Now setup the Webpack configuration for React, like we did for electron, we need to create a specific config file for react in the root folder:

webpack.react.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/renderer.tsx',
  target: 'electron-renderer',
  devtool: 'source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist/renderer.js'),
    compress: true,
    port: 9000
  },
  resolve: {
    alias: {
      ['@']: path.resolve(__dirname, 'src')
    },
    extensions: ['.tsx', '.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        include: /src/,
        use: [{ loader: 'ts-loader' }]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      }
    ]
  },
  output: {
    path: __dirname + '/dist',
    filename: 'renderer.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ]
};

And update the webpack.config.js:

./webpack.config.js

const electronConfigs = require('./webpack.electron.js');
const reactConfigs = require('./webpack.react.js');

module.exports = [
  electronConfigs,
  reactConfigs
];

Hot Reload Setup (Optional)

To avoid running the build whenever we make any changes we will add Hot Reload, for that we need to install the following packages:

npm install nodemon webpack-dev-server electron-is-dev concurrently --save-dev

First we will setup the Electron Hot Reload, for that we need to create a nodemon.json file in the root, and add the following settings:

nodemon.json

{
  "watch": [ 
    "src/main.ts", 
    "src/electron/*"
  ],
  "exec": "webpack --config ./webpack.electron.js && electron ./dist/main.js",
  "ext": "ts"
}

Now for React we need to update Webpack Configuration:

...
module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist/renderer.js'),
    compress: true,
    port: 9000
  },
  ...
}

We should update our package.json:

  ...
  "scripts": {
    "build": "webpack",
    "react:dev": "webpack serve --mode=development",
    "electron:dev": "nodemon",
    "dev": "concurrently --kill-others \"npm run react:dev\" \"npm run electron:dev\"",
    "start": "npm run build && electron dist/main.js"
  },
  ...

Last thing we should change our main.js:

import { app, BrowserWindow } from 'electron';
import isDev from 'electron-is-dev'; // New Import

const createWindow = (): void => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  console.log(isDev);
  win.loadURL(
    isDev
      ? 'http://localhost:9000'
      : `file://${app.getAppPath()}/index.html`,
  );
}

app.on('ready', createWindow);

SCSS Setup (Optional)

Install dependecies necessary for it:

npm install sass-loader sass style-loader css-loader --save-dev

Update React Webpack Configuration:

...
rules: [
  ...
   {
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
      ],
    }
]

Create you first SCSS file under src/app folder, and update you app.tsx importing it.

./src/app/app.tsx

import React from 'react';
import 'app.scss'; // New import!!

const App = () => {
  return (
    <div className="app">
      <h1>I'm React running in Electron App!!</h1>
    </div>
  );
}

export default App;

Conclusion of Part 1

Finally, eveything is ready to start our application.
Let's run it!!

npm run start

Repository: Tokei - Part 1 Branch

Part 2: The Tray Menu