От нуля до единицы: используйте Electron для разработки инструментов повышения эффективности рабочего стола

React.js Electron
От нуля до единицы: используйте Electron для разработки инструментов повышения эффективности рабочего стола

Electron уже не новая технология, сначала это был фреймворк, полученный из github из редактора Atom. Написав Javascript, HTML, CSS, можно быстро скомпилировать межсистемные настольные приложения. Появление Electron расширило нашу деятельность в качестве фронтенд-разработчиков.

Поделитесь небольшим приложением, основанным на технике Pomodoro, недавно созданной с помощью Electron. Из-за сложности реализации на рынке уже есть много подобных приложений. Давайте попробуем реализовать его с помощью Electron.

Предварительный просмотр финального эффекта:

effect

🍅 Метод работы

Суть Техники Помидора состоит в том, чтобы разделить части задачи на единицы времени (25 минут), которые могут быть выполнены.В течение этих 25 минут сосредоточьтесь на этой задаче 3 и не допускайте ничего, не связанного с задачей.После того, как задача будет завершено, это можно сделать в течение короткого времени.Отдохните и возобновите работу.

Таким образом, смысл этого приложения в том, чтобы позволить вам создавать задачи, ⏳ 25 минут, чтобы помочь сосредоточиться на задаче, над которой вы сейчас работаете.

Стоя на плечах гигантов

Пробуя новую технологию, не учитесь создавать стек технологий с нуля, сначала сделайте это, а затем проверьте, не возникнет ли у вас проблем.Электронное сообществоЕсть много отличных осадков, инструментов, шаблонов, компонентов, руководств и многого другого.

Реагировать поиск по ключевым словам, найтиelectron-react-boilerplateЭта стандартная библиотека, эта библиотека была интегрирована сreact, redux, sass, flow, hmr webpackОжидание инструментов во время подготовкиelectron-builderупаковочный инструмент, какelectronДля новичков мы предпочитаем готовые инструменты, чтобы быстро начать развитие бизнеса.

SVG и компоненты React

Вероятно, нарисован эскиз, готовый перейти в стадию разработки. Учитывая, что иконка svg будет использоваться позже, сначалаFlatIconНайдите несколько бесплатных иконок здесь, загрузите файл SVG.

пройти черезSVGRОнлайн-инструмент для импорта содержимого SVG для генерации кода компонента React. (у svgr также есть такие инструменты, как cli)

Преимущество использования SVG Component в том, что вы можете более гибко управлять стилем в коде, по сравнению с иконками png, он более интерактивен и имеет высокий уровень повторного использования.

SVGR

Подносы и всплывающие подносы

Когда приложение запускается, оно скрыто в углу меню в трее. При нажатии отображается BrowserWindow. С помощью метода, предоставленного Electron, можно получить информацию о границах лотка и всплывающем окне трея, а также Координатное положение может быть установлено.

// main.js
const tray = new Tray(path.join(__dirname, '../static', 'tray.png'));

const mainWindow = new BrowserWindow({
  // ...others
  frame: false,
  resizable: true,
  transparent: true
});

const showWindow = () => {
  const { x, y } = getPositionFromActiveDisplay();
  mainWindow.setPosition(x, y, true);
  mainWindow.show();
};

const getPositionFromActiveDisplay = () => {
  const trayBounds = tray.getBounds();
  const windowBounds = mainWindow.getBounds();

  const x = Math.round(trayBounds.x + trayBounds.width / 2 - windowBounds.width / 2);
  const y = Math.round(trayBounds.y + trayBounds.height);

  return { x, y };
};

tray

👆 Треугольник фигуры рисуется кодом интерфейса, плюс цвет фона рамки и электрона, должно получиться вот так.

Поток рендеринга и основной поток

приложению нужна функция обратного отсчета, которая сообщает пользователю, сколько времени занимает выполнение задачи на расстоянии. Электрон имеет процесс рендеринга и основной поток, BrowserWindow не виден, когда процесс рендеринга попытается уменьшить потребление, поэтому, если поставить галочку, если, когда приложение находится в фоновом режиме, в процессе рендеринга появится очень большое отклонение по времени. Используемые здесь ipcMain и ipcRenderer Electron предназначены для межпроцессного взаимодействия.

Отправлять события Tick каждую секунду в основном потоке

// main.js
ipcMain.once('store-ready', event => {
  const run = () => {
    setTimeout(() => {
      run();
      event.sender.send('tick');
    }, 1000);
  };
  run();
});

Процесс визуализации получает событие и отправляет действие TICK.

// app/index.js
const store = configureStore({
  tasks: electronStore.getTasks()
});

ipcRenderer.send('store-ready');
ipcRenderer.on('tick', () => {
  store.dispatch({
    type: TICK
  });
});

В хранилище избыточности текущая выполняемая задача оценивается для расчета времени обратного отсчета.

switch  (action.type) {
  case TICK:
    return {
      ...state,
      rows: state.rows.map(task =>
          task.id === state.currentId
            ? {
                ...task,
                remain: Math.max(task.remain - 1, 0)
              }
            : task
      )
    };

постоянное хранилище данных

Существует много решений для сохранения данных, поскольку это интерфейсный браузер, мы можем выбрать localStorage, Cookie, indexDB и так далее. Учитывая надежность, постоянство и место для хранения, вы также можете записывать данные в путь приложения, записывая файлы в Electron. Таким образом, даже если приложение удалено, пока данные не очищены, пользовательские данные все еще существуют.

Путь к хранилищу приложения можно получить через приложение Electron getPath.

import { app } from 'electron';
app.getPath('userData');

Путь к приложению под Mac/Users/user/Library/Application Support/focus. Более простой способ напрямую использовать библиотеку с открытым исходным кодомelectron-storekey-valueформат для хранения json-файлов.

{
  "tasks": {
    "rows": [
      {
        "name": "任务名称",
        "id": "91ac7f05-76f4-46ea-addb-f392a3a29b54",
        "created_at": 1553398427806,
        "plan": 1500,
        "remain": 0,
        "done": true
      }
    ],
    "currentId": "91ac7f05-76f4-46ea-addb-f392a3a29b54"
  }
}

Пользовательский интерфейс обратного отсчета

Некоторые стили сложно реализовать с помощью css, но очень просто реализовать с помощью svg. Например, пользовательский интерфейс с обратным отсчетом, закругленные углы пути и длину пути сложнее реализовать с помощью CSS. Вы можете рисовать и обрабатывать прямо в Sketch, экспортировать его в svg и управлять им напрямую через код реакции.

export default function(props: Props) {
  const offset = percentage * totalLength;
  const cx =
    Math.cos(percentage * Math.PI * 2 - Math.PI * 0.5) * radius + radius;
  const cy =
    Math.sin(percentage * Math.PI * 2 - Math.PI * 0.5) * radius + radius;
  return (
    <svg>
      ...others
      <circle
        id="path-1"
        cx={cx}
        cy={cy}
        r="32"
        fill="white"
        style={{ transition: '1s linear' }}
      />
      <path
        ...others
        strokeLinecap="round"
        strokeDasharray={totalLength}
        strokeDashoffset={offset}
        style={{ transition: '1s linear' }}
      />
    </svg>
  );
}

Оценка критического состояния

Приложение должно иметь уведомление в конце времени задачи.Из-за дизайна галочки 👆 его можно поместить в промежуточное программное обеспечение избыточности, чтобы определить, завершена ли задача.

// middlewares/tasks
export default ({ getState }) => next => action => {
  if (typeof action === 'object' && action.type === 'TICK') {
    const beforeCount = getTimeEndTaksCount(getState);
    next(action);
    const afterCount = getTimeEndTaksCount(getState);

    if (beforeCount !== afterCount) {
      new Notification('Focus,任务完成了吗?');
    }
  } else {
    next(action);
  }
};

После действия Tick определите, изменилось ли количество выполненных задач, и используйте уведомление HTML5, чтобы уведомить пользователя.

notification

Travis CI

После разработки функции используйтеelectron-builderОн упакован и выпущен, и после того, как сборка будет отправлена ​​​​на выпуск github, пользователи могут напрямую загрузить последний пакет здесь.

такой же,boilerplateуже готов.travis.ymlфайл, единственное, что нам нужно сделать, это вGitHub.com/settings/к…для создания токена наwww.travis-ci.org/Настроить перед сборкойEnvironment Variables,GH_TOKEN

триггерная сборка, после успешной сборки вы можете увидеть пакет, который был успешно собран, загрузить и использовать

Суммировать

Используя Electron, фронтенд-разработчики могут использовать собственное оружие для создания кросс-системных настольных приложений, не изучая другие технологии.Недостаток в том, что упакованный объем небольшой функции составляет 70M.

Это приложение проще, чем ожидалось, от идеи до окончательной реализации, и заинтересованные студенты могут также сделать некоторые гаджеты своими руками. Полный код есть на githubGitHub.com/он Кайл/Будда…, добро пожаловать в опыт, а также добро пожаловать в звезду~

demo