Створення десктопного застосунку з Vue: Electron

Створимо застосунок для перевірки погоди у місті за вибором користувача на основі API OpenWeatherMap.

Інструментарій:

• OpenWeatherMap API
• Electron

Щоб швидко розпочати, використаємо electron-vue – шаблон, що надає vue-cli, базові Vue плагіни, пакувальник, тестування, інструменти розробника й інші функції.

Встановлення

Шаблон electron-vue створений як шаблон VueCLI 2.x й включає опції з налаштування застосунку. Тому вам треба встановити його глобально:

npm install -g vue-cli

Якщо ви надаєте перевагу використанню найсвіжішої версії VueCLI, тоді вам також потрібно встановити глобальний міст:

npm install -g @vue/cli @vue/cli-init

Та ініціалізувати ваш проект:

vue init simulatedgreg/electron-vue weather-app

Це запустить встановлення проекту з декількома опціями, між якими необхідно обрати:

Крутіше всього те, що якщо вам потрібні якісь розповсюджені плагіни та бібліотеки, такі як axios, ви можете вибрати їх під час встановлення.

Практично всі вибори були зрозумілі, окрім одного:

Згідно цього треду, схоже, що electron-builder виявився кращим вибором, тому оберемо його.

Після встановлення вам потрібно перейти до теки проекту й запустити npm install або yarn install. Ми готові розпочати

Розуміння структури застосунку

Одразу після встановлення всередині src ви можете помітити дві теки: main та renderer. Перша є необхідною для головного процесу Electron.

Згідно з документацією electron-vue, процес, що запускає головний скрипт package.json, називається головним процесом. Скрипт, який запускається в головному процесі, може відображати GUI, створюючи веб-сторінки.

У теці main є два файли: index.js та index.dev.js. Перший — головний файл вашого застосунку, в якому завантажується electron. Він також використовується як вхідний файл webpack для продакшена. Вся робота головного процесу має починатися тут.

index.dev.js використовується спеціально і тільки для розробки, оскільки він встановлює electron-debug та vue-devtools. Вам не потрібно взаємодіяти з ним під час розробки застосунку.

Тека renderer необхідна для процесу renderer.

Оскільки Electron використовує Chromium для відображення веб-сторінок, також використовується його мультипроцесорна архітектура. Кожна веб-сторінка в Electron працює у власному процесі, який називається процесом рендерингу.

Як можна помітити, це «нормальна» структура Vue застосунку з теками assets та components, файлами main.js та App.vue. Ось структура останнього:

<template>
  <div id="app">
    <landing-page></landing-page>
  </div>
</template>

<script>
  import LandingPage from '@/components/LandingPage'

  export default {
    name: 'weather-app',
    components: {
      LandingPage
    }
  }
</script>

<style>
  /* CSS */
</style>

І якщо ми спробуємо виконати npm run dev, то отримаємо наступний результат:

Таким чином, є компонент landing-page, а також інструменти розробника. Тепер можна почати його змінювати!

Каркас застосунку

На відміну від Vuido, застосунок на основі Electron побудований на основі HTML-тегів, а не нативних компонентів. Тому ми створимо структуру, подібну до звичайного веб-застосунку й використаємо для стилів CSS.

Примітка: ніякі CSS фреймворки або бібліотеки компонентів не застосовуються. Єдина бібліотека, яка використовується — axios.

Спершу позбавимося компоненту landing-page. А потім додамо просте поле вводу й кнопку:

<div id="app">
    <p>Enter the city name to check current weather in it</p>
    <section class="weather-input">
      <input type="text" v-model="query">
      <button :disabled="!query.length">Check</button>
    </section>
</div>

Тепер наш застосунок виглядає наступним чином:

У нас в даних є властивість query для обробки вводу користувача й ми створимо виклик API з цим запитом в якості параметра.

Здійснення виклику API

Скористаємося OpenWeatherMap API поточної погоди. Він надає вам багато різної інформації. Можете переглянути приклад JSON відповіді тут.

Ми вже включили axios у наш застосунок під час процесу встановлення. Подивімося на src/renderer/main.js:

import Vue from 'vue';
import axios from 'axios';
import App from './App';

if (!process.env.IS_WEB) Vue.use(require('vue-electron'));
Vue.http = Vue.prototype.$http = axios;
Vue.config.productionTip = false;

Отже, ми можемо використовувати методи axios як this.$http в екземплярі компоненту. Єдина річ, яку ми тут додамо — базова URL для викликів API:

axios.defaults.baseURL = 'https://web.archive.org/web/20230608175930/http://api.openweathermap.org/data/2.5';

Тепер у App.vue ми створимо властивості даних для відображення різних погодних даних:

data() {
    return {
      query: '',
      error: false,
      city: '',
      country: '',
      weatherDescription: '',
      temp: null,
      tempMin: null,
      tempMax: null,
      humidity: null,
      icon: '',
    };
},

Створімо також метод для вилучення наших даних:

methods: {
  showWeather() {
    this.$http
      .get(`/weather?q=${this.query}&units=metric&&appid=${API_KEY}`)
      .then(response => {
        this.city = response.data.name;
        this.country = response.data.sys.country;
        this.weatherDescription = response.data.weather[0].description;
        this.temp = response.data.main.temp;
        this.tempMin = response.data.main.temp_min;
        this.tempMax = response.data.main.temp_max;
        this.humidity = response.data.main.humidity;
        this.icon = `http://openweathermap.org/img/w/${
          response.data.weather[0].icon
        }.png`;
        this.error = false;
      })
      .catch(() => {
        this.error = true;
        this.city = '';
      });
  },
},

Додамо його до колбеку нашої кнопки.

<button :disabled="!query.length" @click="showWeather">Check</button>

Тепер якщо ви введете текст у поле вводу й натиснете кнопку, то побачите виклик API у вкладці Network:

Відображення погодних даних

Додамо ці дані у шаблон:

<template>
  <main id="app">
    <p>Enter the city name to check current weather in it</p>
    <section class="weather-input">
      <input type="text" v-model="query">
      <button :disabled="!query.length" @click="showWeather">Check</button>
    </section>
    <section v-if="error" class="weather-error">
      There is no such city in the database
    </section>
    <section v-if="city.length" class="weather-result">
      <h1>{{city}}, {{country}}</h1>
      <p><em>{{weatherDescription}}</em></p>
      <div class="weather-result__main">
        <img :src="icon" alt="Weather icon">
        <div class="weather-result__temp">
          {{temp}}°C
        </div>
      </div>
      <div class="weather-result__details">
        <p>Min: {{tempMin}}°C</p>
        <p>Max: {{tempMax}}°C</p>
        <p>Humidity: {{humidity}}%</p>
      </div>
    </section>
  </main>
</template>

Вигляд нашого застосунку:

Чудово, ми можемо бачити поточну погоду. Але все виглядає так, наче це 1999 рік ... додамо трохи CSS магії (насправді, багато CSS магії)!

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
}

#app {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 10px;
  background: rgb(212, 228, 239);
  background: -moz-radial-gradient(
    center,
    ellipse cover,
    rgba(212, 228, 239, 1) 0%,
    rgba(134, 174, 204, 1) 100%
  );
  background: -webkit-radial-gradient(
    center,
    ellipse cover,
    rgba(212, 228, 239, 1) 0%,
    rgba(134, 174, 204, 1) 100%
  );
  background: radial-gradient(
    ellipse at center,
    rgba(212, 228, 239, 1) 0%,
    rgba(134, 174, 204, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4e4ef', endColorstr='#86aecc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.weather-input {
  display: flex;
  align-items: center;
  padding: 20px 0;
}

.weather-result {
  text-align: center;
  &__main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
    font-size: 1.3rem;
    font-weight: bold;
  }
  &__details {
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: dimgray;
  }
}

.weather-error {
  color: red;
  font-weight: bold;
}

input {
  width: 75%;
  outline: none;
  height: 20px;
  font-size: 0.8rem;
}

button {
  display: block;
  width: 25%;
  height: 25px;
  outline: none;
  border-radius: 5px;
  white-space: nowrap;
  margin: 0 10px;
  font-size: 0.8rem;
}
</style>

І нарешті у нас є хороший повнофункціональний застосунок:

Останнє, що потрібно зробити перед пакуванням — зменшити розмір вікна. Якщо ми переглянемо файл src/main/index.js, то знайдемо в ньому налаштування для вікна:

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000
})

Змінімо ширину на 450 й висоту на 250.

Пакування

Чудові новини: ви можете зробити свій застосунок веб-застосунком. Якщо ви запустите задачу build:web, то знайдете збірку веб-застосунку у теці dist.

Але повернімося до нашого десктопного застосунку й запустімо задачу build. В результаті ви матимете теку, названу як ваша платформа, всередині теки build (наприклад, mac) й файл застосунку у ній. А її розмір складає аж 133 Мб!

Остаточний вигляд:

Висновки

Плюси:

• легко розпочати;
• хороша документація;
• надає можливість створення веб-застосунку;
• може бути кастомізований за допомогою CSS.

Мінуси:

• дуже великий розмір пакету;
• повільніший за застосунок, створений за допомогою нативних компонентів GUI;

Electron-vue — хороший варіант, якщо ваш застосунок потребує унікального вигляду й вас мало хвилює розмір пакету й продуктивність.