Scrivere Json File in ElectronJS

Un esempio di come salvare i dati in formato JSon in un progetto ElectronJS

Prima viene creato un nuovo oggetto vuoto e successivamente si inseriscono le coppie chiave-valore per popolare l'oggetto, l'oggetto viene poi convertito in una stringa Json con stringify ed infine la stringa viene salvata sul filesystem

===============================================================
      var sinkhole = {};
      sinkhole.localita = sessionStorage.getItem("localita");
      sinkhole.comune = sessionStorage.getItem("comune");
      sinkhole.data = sessionStorage.getItem("data");
      sinkhole.ora = sessionStorage.getItem("ora");
      sinkhole.compilatore = sessionStorage.getItem("compilatore");
      sinkhole.annotazioni = sessionStorage.getItem("annotazioni");
      sinkhole.nord = sessionStorage.getItem("nord");
      sinkhole.est = sessionStorage.getItem("est");
      sinkhole.sistema = sessionStorage.getItem("sistema");

      sinkhole.diametro = diametro;
      sinkhole.deformazione = deformazione;
      sinkhole.pericolo = pericolo;
      sinkhole.elemento = elemento;
      
      var esportazione = JSON.stringify(sinkhole);

      const fs = require('fs');
      var nome_file = sessionStorage.getItem("comune")+"_"+sessionStorage.getItem("ora")+".json";
      fs.writeFile(nome_file, esportazione, (err) => {
        if(err){
            alert("An error ocurred creating the file "+ err.message)
        }
        else {
          alert("File salvato come " + nome_file);
        }
      });

Electron Packager

Mediante Electron Packager si possono creare dei pacchetti nativi per Linux, Windows e Mac OSX usando una sola piattaforma di sviluppo (nel mio caso una Linux Box)

Electron Packager si  installa con

npm install electron-packager -g

Per creare i pacchetti Windows in una Linux Box si deve prima installare Wine in modalita' 32 e 64 bit (attezione a questo ultimo aspetto)

Windows 64 bit
electron-packager . sinkholes_electron --overwrite --asar=true --platform=win32 --arch=x64  --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Sinkholes ElectronJs"

Windows 32 bit
electron-packager . sinkholes_electron --overwrite --asar=true --platform=win32 --arch=ia32  --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Sinkholes ElectronJs"

Mac OsX

electron-packager . --overwrite --platform=darwin --arch=x64  --prune=true --out=release-builds

Linux 64

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64  --prune=true --out=release-builds

Per creare pacchetti senza asar si deve usare --no-asar (al contrario di come verrebbe naturale --asar=false)

Integrazione di JQuery in ElectronJS

Il porting di una web app in modalita' desktop con ElectronJS e' una operazione piuttosto indolore ma sorgono dei problemi quando si utilizzano librerie esterne come JQuery

Come riporta da questo link la soluzione e' quella di inserire prima e dopo le righe di importazione le linee evidenziate in giallo

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

semplice ed efficace

ElectronJS

Un paio di anni fa avevo scritto una web app che, finita e pronta per entrare in produzione, non e' mai stata rilasciata....adesso voglio vedere di trasformarla in una applicazione desktop con ElectronJS


Si crea una directory ed una volta entrati in questa si digita

npm init

a questo punto vengono richieste delle informazioni (come il package name, la version e cosi' via) al termine delle quali viene creato il file package.json

si deve modificare il package.json con le indicazioni di start che puntano ad electron
---------------
{ "name": "tua-app", 

"version": "0.1.0", "

main": "index.js", 

"scripts": 

     { "start": "electron ." } 

}

---------------

a questo punto si installa Electron 

npm install --save-dev electron

il file di lancio di Electron e' index.js ed ha una forma del tipo

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

 function createWindow () {

 // Crea la finestra del browser 

 win = new BrowserWindow({ width: 800, height: 600 }) 

// e viene caricato il file index.html dell' app. 

win.loadFile('index.html') 

} 

app.on('ready', createWindow)
------------------------

a questo punto ho inserito la web app che avevo scritto un paio di anni fa nella directory (con tutti gli stessi file che avevo sul web server) ed e' bastato inviare il comando

npm start

per avere la web app come un programma che gira in locale.
A questo punto sarebbe carino avere la applicazione in un pacchetto (in modo che sia un eseguibile come un altro per l'utente finale) e cio' si ha con electron packager

npm install -g electron-packager

electron-packager .  (attenzione al punto)

si creera' una subdir con il file in formato eseguibile ed una directory (bastera' distribuire il contenuto della directory in uno zip .. nel mio caso triage-electron-darwin-x64). In questo modo il codice e' pero' completamente leggibile. Puo' essere piu' comodo (non sicuro perche' comunque si riesce a leggere in ogni caso ma non in modo semplice) digitare il comando

electron-packager .  --asar

questo comando invece crea pacchetti per tutti i sistemi operativi suppportati

electron-packager .  --all

si puo' anche indicare una icona con lo switch --icon=assets/icons/png/1024x1024.png

fatto 30 faccciamo 31 ovvero l'installer per l'applicazione (nello specifico per Mac)

npm install electron-installer-dmg -g
(al momento della scrittura di questo post, nonostante la procedura sia corretta, non riesco a creare il dmg perche' su Mac ho un problema sulle dipendenze di una libreria che non si compila