In questo articolo vedremo un utilizzo di Web.UP “particolare”, in non girerà all’interno di un browser, ma al pari di un’applicazione desktop nativa, grazie al tool Electron.js . Potranno così essere eseguite funzioni non consentite ad applicazioni web classiche.

Web vs Desktop

Lo sviluppo software con linguaggi di alto livello è sempre più orientato all’utilizzo di teconologie web, tendenza favorita fondamentalmente da una serie di fattori (esigenze e/o opportunità) come il cross-platform o l’accesso ad internet in banda larga con piani flat.

Ad oggi, ogni buon software garantisce compatibilità (Linux, Mac, Windows) e portabilità (smartphone, smartwatch, tablet) e se sviluppare un’applicazione web, da un lato pone rimedio alla costante ed affannosa rincorsa alla retrocompatibilità (inevitabilmente minata dai produttori di hardware e software), dall’altro pone però limiti intrinseci alla tecnologia stessa, che non permette purtroppo un’integrazione con il sistema operativo ospitante (inteso come sistema operativo su cui gira il browser web), come potrebbe fare altrimenti un’applicazione nativa.

Tramite opportuni software (Electron, Cordova, QT WebEngine…) è possibile superare alcuni limiti di entrambe le tecnologie per goderne solo dei vantaggi.

L’idea di base è di fruire del contenuto web tramite un browser che giri all’interno di un contenitore (Electron aka Atom Shell) in modo che sia quest’ultimo (detto guscio o shell) a porsi come interfaccia con il sistema operativo.

Cos’è

Electron è un framework open-source sviluppato da github, che permette grazie al connubio Node.js (runtime backend) e Chrome (frontend) l’accesso a funzionalità del sistema operativo da parte di applicazioni web.

In sintesi, Electron può essere considerato come un web-browser minimale che interagisce con il sistema operativo e che in fase di pacchettizzazione e distribuzione dell’applicazione ne è parte integrante  (di fatto viene distribuito un pacchetto eseguibile da una specifica architettura).

Informazioni di sistema come la temperatura della cpu e dati dell’accelerometro sono richieste a cui un’applicazione web non può far fronte se non grazie all’aiuto di Electron.
Il successo e la popolarità di Electron sono testimoniate da note applicazioni come Atom, Visual Studio Code, Wire, Signal, Spotify…

Web.UP & Electron

Web.UP, in quanto web application, può chiaramente girare all’interno di Electron e a tal proposito sono stati implementati componenti Sme.UP utilizzabili solo in contesto Electron.

Allo stato dell’arte Web.UP implementa i seguenti componenti che sfruttano Electron:

  • FRE : “FileREader”, legge il contenuto di un file presente sul filesystem del sistema su cui gira l’applicazione electron senza interagire con l’utente; E’ in grado anche di aprire e visualizzare il file tramite il viewer installato nel sistema operativo.
  • SVF : “SaVeFile”, scrive in un file sul filesystem del sistema su cui gira l’applicaizone electron senza interagire con l’utente;
  • RUN : “RUN”, lancia eseguibili presenti sul filesystem del sistema su cui gira l’applicazione electron;

Esempi pratici (Web.UP Showcase)

File Reader (FRE)

File Reader è una forma grafica tra quelle disponibili nel componente FLD, che permette di leggere il contenuto un file di testo per memorizzarlo in una variabile, utilizzabile dove si vuole, ad esempio passandola nell’input di una FUN SmeUP.

  1. Caso di una sezione che ogni 5 secondi (Refresh=”5“) verifica se il contenuto del file (FilePath=”/tmp/myfile.txt“) è cambiato (When=”Change“).
    L’attributo di setup OpenItem=”Yes” permette inoltre di aprire il file mediante l’applicazione associata ed installata nel sistema operativo dell’utente.
::G.SEZ Pos(1) 
 ::G.SUB.FLD Tit="*NONE" 
 ::G.SET.FLD Type="Fre" FilePath="/tmp/myfile.txt" Refresh="5" 
 ::G.DIN Where="xxx" When="Change" Sch.Var="FILECONTENT([*ELECTRON_FILE_CONTENT]) + 
 NOMEFILE([K1]) FILEEXIST([*ELECTRON_FILE_EXIST])" 
 ::D.OGG T(J1) P(PATHFILE) K(/tmp/myfile.txt)

N.B. vengono valorizzate le seguenti variabili
*ELECTRON_FILE_CONTENT -> contenuto del file
*ELECTRON_FILE_EXIST -> true/false esistenza file

    2. Caso di sezione che mostra un file PDF nel viewer di default installato. Essendo il PDF un formato binario, leggerlo significa “aprirlo”:

::G.SEZ Pos(1) 
 ::G.SUB.FLD Tit="*NONE" 
 ::G.SET.FLD Type="Fre" FilePath="/tmp/myfile.pdf" OpenItem="Yes" 
 ::D.OGG T(J1) P(PATHFILE) K(/tmp/myfile.pdf)

N.B. Nel caso di cui sopra, il dinamismo “Change” parte solo se il file esiste e se ne è cambiato il contenuto, il dinamismo “Click” parte sempre.

Save File (SVF)

Save File è un componente non visuale. Può essere usato in una qualunque fun (F(SVF;<servizio>;<funzione.metodo> ) ) che torni l’xml compatibile (vedi sotto), ma non in una ::G.SUB. Prenderà i dati arrivati da un servizio e li salverà su un file locale.

  1. Salvataggio di  una funzione che restituisce un xml contenente i dati da scrivere nel file ed il suo percorso. Naturalmente l’XML, come avviene per matrici, alberi, ecc.. , è generato da un servizio. In questo caso è di tipo CDATA:
::G.SEZ Pos(1) 
 ::G.SUB.BTN Tit="*NONE" 
 ::G.DIN When="Click" Exec="F(SVF;...)"
 ::D.OGG D(SAVE)
...
<Contenuto><![CDATA[
 questo è il contenuto da scrivere
 nel file prova.txt 
 ]]></Contenuto> 
 <Setup> 
 <Program Title="Save file" Context=""> 
 <SVF> 
 <Setup Path="/tmp/prova.txt"/> 
 </SVF> 
 </Program> 
 </Setup> 
...
Run (RUN)

Run è una forma grafica tra quelle disponibili nel componente FLD, che permette di lanciare un qualunque eseguibile.

1) Caso di una sezione che al caricamento esegue il programma “.exe” specificato nell’attributo di setup in “FilePath” passando un parametro specificato in “ExeParms”

:::G.SEZ Pos(1) 
 ::G.SUB.FLD Tit="*NONE" 
 ::G.SET.FLD Type="Run" FilePath="c:\\tmp\\putty.exe" ExeParms="glassfish@mauer.smeup.com" 
 ::G.DIN Where="lebol" When="Change" Sch.Var="EXITCONTENT([*ELECTRON_EXIT_CONTENT])" 
 ::D.OGG T(J1) P(PATHFILE) K(Esegue programma c:\\tmp\\putty.exe con parametro glassfish@mauer.smeup.com)

N.B. viene valorizzata la variabile *ELECTRON_EXIT_CONTENT contenente l’exit code del programma eseguito.

A seguire i video d’esempio dell’utilizzo del componente Run e Fre descritti precedentemente:

Relativamente ad implementazioni, configurazione ed installazione di Electron si rimanda alla documentazione ufficiale ed ai tutorial online.