Imposta elettrone e crea un'applicazione Hello World in Linux

Questo articolo coprirà una guida sull'installazione di elettroni e sulla creazione di una semplice applicazione di elettroni "Hello World" in Linux.

Sull'elettrone

Electron è un framework di sviluppo dell'applicazione utilizzato per la creazione di applicazioni desktop multipiattaforma utilizzando le tecnologie Web in un browser Web autonomo. Fornisce inoltre API specifiche del sistema operativo e un sistema di imballaggio robusto per una più semplice distribuzione delle applicazioni. Una tipica applicazione di elettroni richiede tre cose per funzionare: nodo.JS Runtime, un browser a base di cromo autonoma fornito con API specifiche per elettroni e OS.

Installa il nodo.js

È possibile installare il nodo.Gestione pacchetti JS e "NPM" eseguendo il seguente comando in Ubuntu:

$ sudo apt install nodejs npm

È possibile installare questi pacchetti in altre distribuzioni Linux dal gestore di pacchetti. In alternativa, scarica i binari ufficiali disponibili sul nodo.Sito web JS.

Crea un nuovo nodo.Progetto JS

Una volta installato il nodo.JS e "NPM", crea un nuovo progetto chiamato "Helloworld" eseguendo i seguenti comandi in successione:

$ MKDIR Helloworld
$ CD Helloworld

Successivamente, accendi un terminale nella directory "Helloworld" ed esegui il comando di seguito per inizializzare un nuovo pacchetto:

$ npm init

Passare attraverso la procedura guidata interattiva nel terminale e immettere nomi e valori secondo necessità.

Attendi che l'installazione finisca. Ora dovresti avere un "pacchetto.File JSON "nella directory" Helloworld ". Avere un "pacchetto.Il file JSON ”nella directory del progetto semplifica la configurazione dei parametri del progetto e rende il progetto portatile per una più facile Sharibility.

Il pacchetto.Il file JSON "dovrebbe avere una voce come questa:

"Main": "indice.js "

"Indice.JS ”è dove si troverebbe tutta la logica per il programma principale. Puoi creare aggiuntivo ".JS ",".html "e".file css "in base alle tue esigenze. Ai fini del programma "Helloworld" spiegato in questa guida, il comando seguente creerà tre file richiesti:

$ touch indice.indice JS.indice HTML.CSS

Installare l'elettrone

È possibile installare Electron nella directory del progetto eseguendo il comando di seguito:

$ npm Installa Electron-Save-Dev

Attendi che l'installazione finisca. Electron verrà ora aggiunto al tuo progetto come dipendenza e dovresti vedere una cartella "node_modules" nella directory del progetto. L'installazione di elettroni come dipendenza per progetto è il modo consigliato di installare elettrone secondo la documentazione ufficiale di elettroni. Tuttavia, se si desidera installare Electron a livello globale sul tuo sistema, è possibile utilizzare il comando menzionato di seguito:

$ npm Installa elettrone -G

Aggiungi la seguente riga alla sezione "Script" in "Pacchetto.File JSON "per finire la configurazione di elettroni:

"Avvia": "Electron ."

Crea un'applicazione principale

Apri “Indice.JS ”File in Editor di testo a tua scelta e aggiungi il seguente codice:

const app, browserWindow = requisito ('elettrone');
funzione createwindow ()
const window = new BrowserWindow (
Larghezza: 1600,
Altezza: 900,
WebPreferences:
Nodeintegration: vero

);
finestra.LoadFile ('indice.html ');

app.WhenReady ().Quindi (createwindow);

Apri “Indice.File HTML ”nel tuo editor di testo preferito e inserisci il seguente codice:

Ciao mondo !!

Il codice JavaScript è piuttosto autoesplicativo. La prima linea importa i moduli elettronici necessari per il funzionamento dell'app. Successivamente, crei una nuova finestra del browser autonomo fornito con elettrone e carichi l'indice.file html ". Il markup nell'indice.Il file HTML "crea un nuovo paragrafo" Hello World !!"Avvolto nel"

"Tag. Include anche un collegamento di riferimento all'indice.File di foglio di stile CSS ”utilizzato più avanti nell'articolo.

Esegui l'applicazione Electron

Esegui il comando qui sotto per avviare l'app Electron:

$ npm inizia

Se hai seguito correttamente le istruzioni finora, dovresti ottenere una nuova finestra simile a questo:

Apri “Indice.File CSS "e aggiungere il codice qui sotto per modificare il colore di" Hello World !!" corda.

#hworld
colore rosso;

Esegui di nuovo il seguente comando per vedere lo stile CSS applicato a "Hello World !!" corda.

$ npm inizia

Ora hai il set minimo indicato di file richiesti per eseguire un'applicazione di elettroni di base. Hai “indice.JS "per scrivere la logica del programma," indice.HTML "per l'aggiunta di HTML Markup e" Index.CSS ”per lo styling di vari elementi. Hai anche un "pacchetto.File JSON "e cartella" node_modules "contenente dipendenze e moduli richiesti.

Applicazione elettronica del pacchetto

È possibile utilizzare Electron Forge per confezionare l'applicazione, come consigliato dalla documentazione ufficiale di elettroni.

Esegui il comando qui sotto per aggiungere Electron Forge al tuo progetto:

$ npx @elettron-forge/cli @ultima importazione

Dovresti vedere qualche output come questo:

✔ Controllare il tuo sistema
✔ Inizializzazione del repository Git
✔ Scrivere un pacchetto modificato.file json
✔ Installazione di dipendenze
✔ Scrivere un pacchetto modificato.file json
✔ Fissaggio .gitignore
Abbiamo tentato di convertire la tua app in un formato che Electron-Forge capisce.
Grazie per aver usato "Electron-Forge"!!!

Rivedi “Pacchetto.JSON ”file e modificare o rimuovere le voci dalle sezioni“ produttori ”in base alle tue esigenze. Ad esempio, se non si desidera creare un file "RPM", rimuovi la voce relativa alla costruzione di pacchetti "RPM".

Esegui il comando seguente per creare il pacchetto dell'applicazione:

$ npm run make

Dovresti ottenere un output in modo simile a questo:

> [email protected] Make/Home/Nit/Helloworld
> Electron-forge
✔ Controllare il tuo sistema
✔ Risoluzione della configurazione di Forge
Dobbiamo confezionare la tua applicazione prima di poterlo fare
✔ Preparazione alla domanda di pacchetto per l'arco: x64
✔ Preparare le dipendenze native
✔ Applicazione di imballaggio
Fare per i seguenti obiettivi: Deb
✔ Making for Target: Deb - Sulla piattaforma: Linux - per l'arco: x64

Ho modificato il "pacchetto.File JSON "per creare solo il pacchetto" Deb ". Puoi trovare pacchetti costruiti nella cartella "out" situata all'interno della directory del progetto.

Conclusione

Electron è ottimo per la creazione di applicazioni multipiattaforma in base a una singola base di codice con modifiche specifiche del sistema operativo minori. Ha alcuni problemi propri, il più importante di essi è il consumo di risorse. Poiché tutto è reso in un browser autonomo e viene lanciata una nuova finestra del browser con ogni app di elettroni, queste applicazioni possono essere ad alta intensità di risorse rispetto ad altre applicazioni utilizzando gli strumenti di sviluppo di applicazioni specifici del sistema operativo nativo.