This is the second day of my participation in Gwen Challenge

Current state of

The first day’s notes basically explain why we made the Mac calendar. Before we start, here’s a list of the features we’ve done so far (using Things 3) :

And a list of features to be done in the future (all recorded in real time as seen or thought, for further development) :

In order to urge myself to write the code every day, SO I directly generated from CAWA-93 / viet-electron-Builder and created the project I maintained for a long time in Github: Fanly/FanlyMenu.

Feel free to fork, or come up with more suggestions and product feature lists.

At the same time, also said a digression, open source code, just like participating in this activity, is hoping someone to help supervise, so that they continue to improve.

Feature list

As can be seen from the above, the core functions I want to achieve are as follows:

  1. Display lunar calendar;
  2. Display holiday names as required;
  3. Display almanac;
  4. Display weather forecast;
  5. Add event functionality, that is, GTD-related functionality;
  6. Add the function of displaying timelines related news (such as birthdays of family members, relatives and friends, colleagues, etc.);
  7. Sync your own calendar and Google Calendar events.
  8. Todo (there are many more, to be updated in the next step).

Code for the target

The core of using Electron + Vue3 + TypeScript is to learn its development principle and master various frameworks and language thinking.

Electron

Both the current hot Code IDE: VS Code and InVision use Electron

In this case, I want to know how to pass messages from the Main process to the renderer process via “message events” and how to do that with Preload scripts, as shown in this code:

createWindow(): BrowserWindow { const window = new BrowserWindow({ width: 600, height: 700, resizable: false, alwaysOnTop: true, show: false, frame: false, webPreferences: { webSecurity: false, preload: join(__dirname, '.. /.. /preload/dist/index.cjs'), contextIsolation: this.env.MODE ! == 'test', // Spectron tests can't work with contextIsolation: true enableRemoteModule: this.env.MODE === 'test', // Spectron tests can't work with enableRemoteModule: false }, });Copy the code

Then in preload/ SRC /index.ts, add ipcRenderer:

import {contextBridge, ipcRenderer} from 'electron';

const apiKey = 'electron';
/**
 * @see https://github.com/electron/electron/issues/21437#issuecomment-573522360
 */
const api: ElectronApi = {
  versions: process.versions,
  ipcRenderer: ipcRenderer,
};
Copy the code

This can be called directly from Vue code in the Renderer layer:

quit(): void {
    window.electron.ipcRenderer.send('quit');
},
Copy the code

Send a message event to the Main layer to quit the APP, and finally catch it in the Main layer and perform the operations relative to:

import { app, protocol, ipcMain } from 'electron'; . ipcMain.on('quit', () => { app.quit(); });Copy the code

Note: specific code analysis, see the follow-up record!

Vue 3

Vue 3 is a very convenient way to use multiple models in your template code and have a hierarchy of models:

<template>
  <div>
    <fullcalendar-sub
      v-model:changeShowFestivals="changeShowFestivals"
      v-model:changeShowWeather="changeShowWeather"
      v-model:weather="weather"
      v-model:location="location"
      @settingClick="visibleFullSetting = true"
      @dateClick="dateClick"
    />
    <weather-sub
      v-if="changeShowWeather"
      v-model:changeShowWeather="changeShowWeather"
      v-model:weather="weather"
      v-model:location="location"
    />
    <setting-sub
      v-model:visibleFullSetting="visibleFullSetting"
      v-model:changeShowWeather="changeShowWeather"
      v-model:changeShowFestivals="changeShowFestivals"
      v-model:location="location"
    />
    <date-view-sub
      v-model:visibleFullDateView="visibleFullDateView"
      v-model:date="date"
    />
  </div>
</template>
Copy the code

Here, however, there are some other grandparent transitive relationships that can be handled by using functions directly:

<InputSwitch
  v-model="inputSwitchWeatherModel"
  @change="$emit('update:changeShowWeather', inputSwitchWeatherModel)"
/>

...

emits: [
'update:visibleFullSetting',
'update:changeShowFestivals',
'update:changeShowWeather',
'update:location',
],
Copy the code

For details, refer to the official website documents

TypeScript

In the viet-electronic-Builder template, Javascript still dominates, so how to use TypeScript and improve the TypeScript ratio is my next goal:

At the same time, I also bought the relevant books, as a reference book, placed beside, you can read at any time:

summary

Today, I’m going to put together a list of features I’ve completed so far, and what I want to learn about Electron, Vue 3, and TypeScript along the way.

Tomorrow we will enter the dry goods record stage of function summary, which will be continued.