7° parte — Creiamo una app con Vue ed Electron

5 min readAug 7, 2022

È stato un lavoro lungo ed articolato, ma siamo giunti alla fine! 😎

Abbiamo da sistemare solo alcuni dettagli e poi potremo convertire il nostro lavoro in una App Desktop con Electron.

Nell’ultimo articolo abbiamo visto come:
1. Creare un form dinamico con validazione a due livelli
2. Creare dei Vuex getters
3. Creare un componente Select
4. Utilizzare ChartJs per visualizzare i colori su un grafico a ciambella
5. Utilizzare Prismjs per formattare SCSS e Json

In questo articolo invece vedremo come:

Usare Local Storage per salvare dei dati nel Browser.
Utilizzare router.onready per intercettare il this.$router .
Intercettare un evento scroll verticale e convertirlo in scroll orizzontale.
Creare una app Electron da un progetto VueJs.

Local Storage

Arrivati a questo punto la nostra applicazione è praticamente completa, ma se per errore facciamo un refresh o chiudiamo la pagina perderemo tutte le nostre impostazioni!

Possiamo risolvere questo problema salvando i nostri dati nell’object Storage tramite window.localStorage.

https://developer.mozilla.org/en-US/docs/Web/API/Storage
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage?retiredLocale=it

Utilizziamo localstorage.setItem()per salvare il dato e localstorage.getItem() per recuperarlo.

store/index.js

Ma se accedessimo ad una palette prima di aver creato i dati necessari?

Possiamo gestire questo caso con un redirect verso la pagina Palette

Palettecolors.vuee PaletteWheel.vue

Lazy-loading dei componenti: risolviamo un altro piccolo bug

Se usiamo il lazy-loading dei componenti nelle rotte, this.$routernon sarà subito disponibile e dovremo aspettare che sia caricato asincronamente.

Ci viene in aiuto il metodo router.onready

https://router.vuejs.org/api/#router-onready
router.onReady
Signature:
router.onReady(callback, [errorCallback])
This method queues a callback to be called when the router has completed the initial navigation, which means it has resolved all async enter hooks and async components that are associated with the initial route.
This is useful in server-side rendering to ensure consistent output on both the server and the client.
The second argument errorCallback is only supported in 2.4+. It will be called when the initial route resolution runs into an error (e.g. failed to resolve an async component).

Modifichiamo App.vue

Intercettiamo l’evento scroll verticale sulle palette e convertiamole in orizzontale.

A questo punto vogliamo che le nostre palette siano visibili scrollando con il mouse.

Usiamo l’evento @wheel che ci mette a disposizione Vue.

Quando si attiva questo evento dovremo convertire lo spostamento effettuato in un movimento orizzontale della scrollbar utilizzando event.deltaY ed event.deltaX che ci restituiranno lo spostamento in orizzontale e verticale.
Se intercetteremo uno scroll verticale aggiungeremo o toglieremo px al container.scrollLeft

WheelEvent.deltaX
WheelEvent.deltaY

Ma attenzione, dobbiamo evitare di gestire troppe chiamate legate allo scroll.
Ci vengono in soccorso requestAnimationFrame e cancelAnimationFrame che funzioneranno come un debouncing.

requestAnimationFrame restituisce un id che può essere usato per la sua cancellazione, come per il setTimeout o setInterval.

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame

Electron, stiamo arrivando!

Innanzitutto facciamo una build del nostro progetto avviando lo script

npm run build

Questo creerà per noi una cartella distcon, tra gli altri, un file index.html che ci servirà come entry point della nostra app Electron.

Cosa è Electron?

Electron è un framework per creare applicazioni desktop utilizzanto Javascript, HTML e CSS.
In poche parole tramite questo framework possiamo convertire il nostro progetto in VueJS in una app installabile sul desktop.

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding [Chromium](https://www.chromium.org/) and [Node.js](https://nodejs.org/) into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.

Per poter utilizzare Electron è necessario Node, noi lo abbiamo già nel nostro stack per cui dobbiamo solo controllare che le versioni minime corrispondano.

Nel nostro package.jsondobbiamo avere queste info

{  
   "name": "",  
   "version": "",  
   "description": "",  
   "main": "",  
   "author": "",  
   "license": ""  
}

Per prima cosa installiamo Electron
Usiamo la versione nightly per avere accesso a delle feature sperimentali come l’aspect ratio

npm install electron-nightly

Modifichiamo il nostro package.jsone inseriamo un nuovo script

{
  "scripts": {
    [...]
    "start": "electron ."
  }
}

Questo script ci consentirà di avviare Electtron in modalità sviluppo.
Digitiamo npm run start e avremo un errore.

color-palettes-range@0.1.0 start
electron .(node:7693) electron: Failed to load URL: […] index.html with error: ERR_FILE_NOT_FOUND
(Use `Electron — trace-warnings …` to show where the warning was created)

Ottimo!
La nostra applicazione ora non trova un entry point adatto, passiamo al secondo step.
Assicuriamoci di avere nel nostro package.jsoncome entry point il file main.js e inseriamo in questo file i dati necessari ad Electron per avviare la nostra app Vue.

Importiamo appe BrowserWindow

const { app, BrowserWindow } = require('electron')

Useremo questi sue moduli per creare una app e la window nella quale visualizzeremo i nostri contenuti

Importiamo urle path

const url = require("url");
const path = require("path");let mainWindow;

Creiamo una funzione che instanzierà la BrowserWindowe imposteremo le proprietà necessarie per caricare la nostra index.html

Quando la app è pronta avviamo la nostra funzione

app.on(“ready”, createWindow);

Per gestire la chiusura delle finestre della app in macOs
intercettiamo l’evento window-all-closed .
Sull’evento activate invece creiamo la window se non esiste.

https://www.electronjs.org/docs/latest/api/app#event-window-all-closed
https://www.electronjs.org/docs/latest/api/app#event-activate-macos

Distribuiamo l’applicazione

Electron non incorpora un tool di package, quindi dobbiamo installare un altro tool.

npm install --save-dev @electron-forge/cli
npx electron-forge import

Completata l’installazione di Electron Forge il nostro package.json

```JS
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
  },

Inoltre sarà stata aggiunta una config.forge

Qui inseriremo i dati utili a personalizzare la nostra app e le piattaforme per le quali vogliamo realizzare una distribuzione.

"config": {
    "forge": {
      "packagerConfig": {
        "icon": "./ico",
        "name": "Color Palettes Range"
      },
      "makers": [
        {
          "name": "@electron-forge/maker-zip",
          "config": {
            "name": "ColorPalettesRange"
          },
          "platforms": [
            "darwin",
            "win32"
          ]
        }
      ],
      "make_targets": {
        "win32": [
          "squirrel"
        ]
      }
    }
  }

Avviamo lo script

npm run make

In questo modo, nel mio caso, sarà creato un package per MacOS

File .exe per Windows da MacOs

Volendo creare anche un package per Windows da Mac è necessario installare Mono https://www.mono-project.com/download/stable/

Aggiungiamo un altro script al nostro package.json

"scripts": {
    ...
    "make-win": "electron-forge make --arch=x64 --platform=win32"
  },

e lo avviamo

npm run make-windows

Le nostre app in versione MacOs e Windows saranno ora nella cartella out/make/zip

Siamo giunti alla conclusione di questo viaggio 😁!

Abbiamo visto in questo ultimo articolo

Usare Local Storage per salvare dei dati nel Browser.
Utilizzare router.onready per intercettare il this.$router .
Intercettare un evento scroll verticale e convertirlo in scroll orizzontale.
Creare una app Electron da un progetto VueJs.

Link agli articoli precedenti

Repository Github

https://github.com/ChiaraPassaro/colorpalettesrangeapp