Πώς να δημιουργήσετε εύκολα εφαρμογές για επιτραπέζιους υπολογιστές με HTML, CSS και Javascript

Μπορούν πραγματικά να χρησιμοποιηθούν HTML, CSS και Javascript για τη δημιουργία εφαρμογών επιφάνειας εργασίας;

Η απάντηση είναι ναι.

Σε αυτό το άρθρο θα επικεντρωθούμε κυρίως στο πώς μπορεί να χρησιμοποιηθεί το Electron για τη δημιουργία εφαρμογών επιτραπέζιου υπολογιστή με Web Technologies όπως HTML, CSS και Javascript.

Ηλεκτρόνιο

Το ηλεκτρόνιο μπορεί να χρησιμοποιηθεί για τη δημιουργία εφαρμογών επιφάνειας εργασίας με HTML, CSS και Javascript. Επίσης, αυτές οι εφαρμογές λειτουργούν για πολλές πλατφόρμες όπως Windows, Mac, Linux και ούτω καθεξής.

Το Electron συνδυάζει το Chromium και το NodeJS σε έναν μόνο χρόνο εκτέλεσης. Αυτό μας επιτρέπει να εκτελούμε τον κώδικα HTML, CSS και Javascript ως εφαρμογή για υπολογιστές.

Ηλεκτρονική σφυρηλάτηση

Εάν το Electron χρησιμοποιείται απευθείας, τότε απαιτείται κάποια χειροκίνητη ρύθμιση πριν από την κατασκευή της εφαρμογής σας. Επίσης, εάν θέλετε να χρησιμοποιήσετε Angular, React, Vue ή οποιοδήποτε άλλο πλαίσιο ή βιβλιοθήκη, θα πρέπει να διαμορφώσετε χειροκίνητα για αυτό.

Το Electron Forge κάνει τα παραπάνω πολύ πιο εύκολα.

Παρέχει εφαρμογές προτύπων με Angular, React, Vue και άλλα πλαίσια που αποφεύγουν τις επιπλέον μη αυτόματες ρυθμίσεις.

Επίσης παρέχει έναν εύκολο τρόπο δημιουργίας και συσκευασίας της εφαρμογής. Παρέχει επίσης πολλά άλλα χαρακτηριστικά που μπορούν να βρεθούν στην τεκμηρίωσή τους.

Προαπαιτούμενα

Βεβαιωθείτε ότι έχετε εγκαταστήσει το NodeJS. Μπορεί να εγκατασταθεί από εδώ.

Εγκαταστήστε το Electron Forge παγκοσμίως χρησιμοποιώντας την ακόλουθη εντολή:

npm install -g electron-forge

Ας ξεκινήσουμε με την εφαρμογή

Χρησιμοποιήστε την ακόλουθη εντολή για να δημιουργήσετε την εφαρμογή σας:

electron-forge init simple-desktop-app-electronjs

Το simple-desktop-app-electronjs είναι το όνομα της εφαρμογής.

Η παραπάνω εντολή θα χρειαστεί λίγο χρόνο για να εκτελεστεί.

Μόλις ολοκληρωθεί η εκτέλεση, ξεκινήστε την εφαρμογή χρησιμοποιώντας τις ακόλουθες εντολές:

cd simple-desktop-app-electronjsnpm start

Αυτό θα ανοίξει ένα παράθυρο όπως αυτό που φαίνεται παρακάτω:

Κατανόηση της υπάρχουσας δομής και του κώδικα φακέλων

Η εφαρμογή έχει μια συγκεκριμένη δομή φακέλων. Εδώ θα αναφέρω μερικά από τα σημαντικά πράγματα σε αυτήν τη δομή φακέλων.

package.json

Έχει πληροφορίες σχετικά με την εφαρμογή που δημιουργείτε, όλες τις εξαρτήσεις που απαιτούνται για την εφαρμογή και ορισμένα σενάρια. Ορισμένα από τα σενάρια είναι ήδη προεπιλεγμένα και μπορείτε επίσης να προσθέσετε νέα σενάρια.

Η διαδρομή config.forge έχει όλες τις διαμορφώσεις που είναι συγκεκριμένες για το ElectronJS. Για παράδειγμα, το make-target χρησιμοποιείται για τον καθορισμό του αρχείου δημιουργίας στόχων για διάφορες πλατφόρμες όπως τα Windows, Mac ή Linux.

Επίσης το package.json έχει το "main": "src/index.js"οποίο δείχνει ότι το src / index.js είναι το σημείο εκκίνησης της εφαρμογής

src / index.js

Σύμφωνα με το package.json, το index.js είναι το κύριο σενάριο. Η διαδικασία που εκτελεί το κύριο σενάριο είναι γνωστή ως η κύρια διαδικασία . Έτσι, η κύρια διαδικασία τρέχει το σενάριο index.js.

Η κύρια διαδικασία χρησιμοποιείται για την εμφάνιση στοιχείων GUI. Αυτό το κάνει δημιουργώντας ιστοσελίδες.

Κάθε ιστοσελίδα που δημιουργήθηκε εκτελείται σε μια διαδικασία που ονομάζεται διαδικασία απόδοσης.

Κύρια διαδικασία και διαδικασία απόδοσης

Ο σκοπός της κύριας διαδικασίας είναι η δημιουργία ιστοσελίδων χρησιμοποιώντας ένα BrowserWindowInstance.

Το BrowserWindowInstance χρησιμοποιεί μια διαδικασία απόδοσης για την εκτέλεση κάθε ιστοσελίδας.

Κάθε εφαρμογή μπορεί να έχει μόνο μία κύρια διαδικασία αλλά μπορεί να έχει πολλές διαδικασίες απόδοσης.

Είναι επίσης δυνατή η επικοινωνία μεταξύ της κύριας και της διαδικασίας απόδοσης. Αυτό, ωστόσο, δεν θα καλυφθεί σε αυτό το άρθρο.

Το abcd.html εμφανίζεται ως δεύτερη ιστοσελίδα στην παραπάνω αρχιτεκτονική. Αλλά στον κώδικα μας δεν θα έχουμε δεύτερη ιστοσελίδα.

src / index.html

index.js φορτώνει το αρχείο index.html σε ένα νέο BrowerWindow Instance.

Αυτό ουσιαστικά σημαίνει ότι το index.js δημιουργεί ένα νέο παράθυρο GUI και το φορτώνει με την ιστοσελίδα index.html Η ιστοσελίδα index.html εκτελείται με τη δική της διαδικασία απόδοσης.

Ο κωδικός στο index.js εξήγησε

Το μεγαλύτερο μέρος του κώδικα που δημιουργήθηκε στο index.js έχει καλά σχόλια που εξηγούν τι κάνει. Εδώ θα αναφέρω μερικά βασικά σημεία που πρέπει να σημειωθούν στο index.js:

mainWindow = new BrowserWindow({ width: 800, height: 600, }); // and load the index.html of the app. mainWindow.loadURL(`file://${__dirname}/index.html`);

The above code snippet basically creates a BrowserWindow Instance and loads index.html into the BrowserWindow.

You will see app used often in the code. For example take the below code snippet:

app.on('ready', createWindow);

app is used to control the application’s event life cycle.

The above code snippet says that when the application is ready, load the first window.

Similarly, app can be used to perform other actions on various events. For example it can be used to perform some action right before the application closes and so on.

Let’s create a Temperature Converter Desktop Application

Let us use the same application we used before and modify it slightly to create a temperature converter application.

First let us install Bootstrap with the following command:

npm install bootstrap --save

Copy the following code into src/index.html:

    Temperature Converter    

Temperature Converter

Celcius: Fahrenheit:

The above code does the following:

  1. Creates a text box with id Celcius. Whenever anything is typed in this textbox, the celciusToFahrenheit() function is called.
  2. Creates a text box with id Fahrenheit. Whenever anything is typed in this textbox, the fahrenheitToCelcius() function is called.
  3. Whenever a new value is typed in the Celcius text box, the value in the Fahrenheit text box displays the same temperature in Fahrenheit
  4. Whenever a new value is typed in the Fahrenheit text box, the value in the Celcius text box displays the same temperature in Celcius

The 2 functions which do the temperature conversion are present in renderer.js.

Create a file called renderer.js inside src. Copy the following code into it:

function celciusToFahrenheit(){ let celcius = document.getElementById('celcius').value; let fahrenheit = (celcius* 9/5) + 32; document.getElementById('fahrenheit').value = fahrenheit; } function fahrenheitToCelcius(){ let fahrenheit = document.getElementById('fahrenheit').value; let celcius = (fahrenheit - 32) * 5/9 document.getElementById('celcius').value = celcius; }

The celciusToFahrenheit() function reads the value in the Celcius text box, converts it to Fahrenheit, and writes the new temperature into the Fahrenheit text box.

The fahrenheitToCelcius() function does the exact opposite of this.

Running the application

Run the application using the following command:

npm start

This should display the following window. Try it out with different values.

Packaging the application

The command to package the application is:

npm run package

This command will take some time to run. Once it finishes check the out folder within the project folder.

I tested this in a Windows machine. This creates a folder called simple-desktop-app-electronjs-win32-x64 inside the out folder

So in the out/simple-desktop-app-electronjs-win32-x64 folder, the command creates an .exe file for this application. Clicking on the exe file automatically starts the desktop application.

The folder name simple-desktop-app-electronjs-win32-x64 can be broken down as appname-platform-architecture where

  • appname = simple-desktop-app-electronjs
  • platform = win32
  • architecture = x64

When you run this command without any parameters, by default it packages for the platform which you are using for development.

Let’s say you want to package for a different platform and architecture. Then you can use the following syntax:

npm run package -- --platform= arch=

For example, in order to package for linux you can use the following command:

npm run package -- --platform=linux --arch=x64

This will create a folder called simple-desktop-app-electronjs-linux-x64 inside the out folder.

Creating a make File

In order to create a make file or an installer for the application, use the following command:

npm run make

This command will take some time to run. Once it finishes check the out folder within the project folder.

The out/make folder will have a Windows installer for the desktop application.

When you run this command without any parameters, by default it creates the installer for the platform which you are using for development.

Code

The code for this desktop application is available in my GitHub repo:

//github.com/aditya-sridhar/simple-desktop-app-electronjs

Congrats ?

You now know how to create desktop applications using HTML, CSS and Javascript.

This article covered very basic concepts of Electron and Electron-Forge.

To know more about them, you can check out their documentation.

About the author

I love technology and follow the advancements in the field. I also like helping others with my technology knowledge.

Feel free to connect with me on my LinkedIn account //www.linkedin.com/in/aditya1811/

You can also follow me on twitter //twitter.com/adityasridhar18

My Website: //adityasridhar.com/

Διαβάστε περισσότερα από τα άρθρα μου στο blog μου στο adityasridhar.com.