Phenquestions
Questo articolo tratterà una guida sull'installazione di Electron e sulla creazione di una semplice applicazione Electron "Hello World" in Linux.
Informazioni su Electron
Electron è un framework di sviluppo di applicazioni utilizzato per creare applicazioni desktop multipiattaforma utilizzando tecnologie Web in un browser Web autonomo. Fornisce inoltre API specifiche del sistema operativo e un robusto sistema di packaging per una distribuzione più semplice delle applicazioni. Una tipica applicazione Electron richiede tre cose per funzionare: Nodo.js runtime, un browser autonomo basato su Chromium che viene fornito con API specifiche di Electron e OS.
Installa nodo.js
Puoi installare Node.js e gestore di pacchetti "npm" eseguendo il seguente comando in Ubuntu:
$ sudo apt install nodejs npmPuoi installare questi pacchetti in altre distribuzioni Linux dal gestore pacchetti. In alternativa, scarica i binari ufficiali disponibili su Node.js sito web.
Crea un nuovo nodo.js Project
Una volta installato Node.js e “npm”, creare un nuovo progetto denominato “HelloWorld” eseguendo in successione i seguenti comandi:
$ mkdir HelloWorld$ cd HelloWorld
Quindi, avvia un terminale nella directory "HelloWorld" ed esegui il comando seguente per inizializzare un nuovo pacchetto:
$ npm initPassa attraverso la procedura guidata interattiva nel terminale e inserisci nomi e valori secondo necessità.
Attendi il completamento dell'installazione. Ora dovresti avere un "pacchetto.json" nella directory "HelloWorld". Avere un “pacchetto.json" nella directory del progetto semplifica la configurazione dei parametri del progetto e rende il progetto portabile per una più facile condivisibilità.
Il pacchetto.json" dovrebbe avere una voce come questa:
"principale": "indice.js""Indice.js" è dove si troverebbe tutta la logica per il tuo programma principale. Puoi creare ulteriori ".js", ".html" e ".css" in base alle tue esigenze. Ai fini del programma "HelloWorld" spiegato in questa guida, il comando seguente creerà tre file richiesti:
$ touch index.indice js.indice html.cssInstalla Electron
Puoi installare Electron nella directory del tuo progetto eseguendo il comando seguente:
$ npm installa elettrone --save-devAttendi il completamento dell'installazione. Electron verrà ora aggiunto al tuo progetto come dipendenza e dovresti vedere una cartella "node_modules" nella directory del tuo progetto. L'installazione di Electron come dipendenza per progetto è il modo consigliato per installare Electron secondo la documentazione ufficiale di Electron. Tuttavia, se desideri installare Electron globalmente sul tuo sistema, puoi utilizzare il comando indicato di seguito:
$ npm installa elettrone -gAggiungi la seguente riga alla sezione "script" in "pacchetto".json" per completare la configurazione di Electron:
"start": "electron ."Crea applicazione principale
Apri “indice.js" nell'editor di testo di tua scelta e aggiungi il seguente codice:
const app, BrowserWindow = require('electron');funzione createWindow()
const window = new BrowserWindow(
larghezza: 1600,
altezza: 900,
WebPreferences:
nodeIntegration: true
);
finestra.loadFile('indice.html');
app.quandoPronto().then(creaFinestra);
Apri “indice.html" nel tuo editor di testo preferito e inserisci il seguente codice:
Ciao mondo !!
Il codice javascript è abbastanza autoesplicativo. La prima riga importa i moduli Electron necessari per il funzionamento dell'app. Successivamente, crei una nuova finestra del browser autonomo che viene fornito con Electron e carichi l'"indice".html" in esso. Il markup nell'"indice".html” crea un nuovo paragrafo “Hello World !!” avvolto nel “
"tag". Include anche un collegamento di riferimento all'"indice".css" file del foglio di stile utilizzato più avanti nell'articolo.
Esegui la tua applicazione elettronica
Esegui il comando seguente per avviare la tua app Electron:
$ npm inizioSe finora hai seguito correttamente le istruzioni, dovresti ottenere una nuova finestra simile a questa:
Apri “indice.css" e aggiungi il codice sottostante per cambiare il colore di "Hello World !!" corda.
colore rosso;
Esegui nuovamente il seguente comando per vedere lo stile CSS applicato a "Hello World !!" corda.
$ npm inizio
Ora hai il set minimo di file necessari per eseguire un'applicazione Electron di base. Hai "indice.js" per scrivere la logica del programma, "index.html” per aggiungere markup HTML e “index.css" per lo styling di vari elementi. Hai anche un "pacchetto.json" e la cartella "node_modules" contenente le dipendenze e i moduli richiesti.
Pacchetto Elettroni Applicazione
Puoi usare Electron Forge per impacchettare la tua applicazione, come raccomandato dalla documentazione ufficiale di Electron.
Esegui il comando seguente per aggiungere Electron Forge al tuo progetto:
$ npx @electron-forge/cli@ultima importazioneDovresti vedere un output come questo:
✔ Controllo del sistema✔ Inizializzazione del repository Git
✔ Scrittura pacchetto modificato.json file
✔ Installazione delle dipendenze
✔ Scrittura pacchetto modificato.json file
Riparazione .gitignore
Abbiamo TENTATO di convertire la tua app in un formato comprensibile da Electron-Forge.
Grazie per aver usato "electron-forge"!!!
Recensione “pacchetto.json" e modifica o rimuovi le voci dalle sezioni "creatori" in base alle tue esigenze. Ad esempio, se non si desidera creare un file "RPM", rimuovere la voce relativa alla creazione di pacchetti "RPM".
Eseguire il comando seguente per creare il pacchetto dell'applicazione:
$ npm esegui makeDovresti ottenere un output simile a questo:
> [email protected] make /home/nit/HelloWorld> marca di fucina di elettroni
✔ Controllo del sistema
✔ Risoluzione della configurazione di Forge
Dobbiamo impacchettare la tua domanda prima di poterla realizzare
✔ Preparazione all'applicazione del pacchetto per arch: x64
✔ Preparazione delle dipendenze native
Applicazione di imballaggio
Realizzazione per i seguenti obiettivi: deb
✔ Realizzazione per target: deb - Sulla piattaforma: linux - Per arch: x64
Ho modificato il "pacchetto.json" per compilare solo il pacchetto "DEB". Puoi trovare i pacchetti creati nella cartella "out" situata all'interno della directory del tuo progetto.
Conclusione
Electron è ottimo per creare applicazioni multipiattaforma basate su una singola base di codice con piccole modifiche specifiche del sistema operativo. Ha alcuni problemi propri, il più importante dei quali è il consumo di risorse. Poiché tutto viene visualizzato in un browser autonomo e viene avviata una nuova finestra del browser con ogni app Electron, queste applicazioni possono richiedere molte risorse rispetto ad altre applicazioni che utilizzano toolkit di sviluppo di applicazioni specifici del sistema operativo nativo.
