Πλήρης Οδηγός και Πηγές Εκμάθησης

Η JavaScript είναι από τις πιο κοινές γλώσσες προγραμματισμού. Το γεγονός ότι μπορεί να χρησιμοποιηθεί τόσο για την ανάπτυξη του backend όσο και για το frontend το έχει κάνει αγαπητό για πολλούς ανθρώπους.

Η JavaScript έχει πολλές βιβλιοθήκες και πλαίσια που επεκτείνουν τις περιπτώσεις χρήσης της πέρα ​​από το vanilla (απλό) JavaScript.

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

Electron JS

Το Electron JS είναι ένα πλαίσιο που μπορούν να χρησιμοποιήσουν οι προγραμματιστές για να δημιουργήσουν εφαρμογές επιτραπέζιου υπολογιστή χρησιμοποιώντας HTML, CSS και JavaScript. Το Electron JS δημιουργήθηκε και διατηρείται από το GitHub.

Το πλαίσιο είναι ένας συνδυασμός Node.JS και Chromium, επιτρέποντας στους χρήστες να διατηρούν μία βάση κώδικα JavaScript και να αναπτύσσουν εφαρμογές για επιτραπέζιους υπολογιστές cross-platform που μπορούν να λειτουργήσουν σε Windows, macOS και Linux.

Η ιστορία του Electron.js ξεκίνησε τον Ιανουάριο του 2013. Η αρχική ιδέα ήταν να δημιουργηθεί ένας επεξεργαστής κειμένου cross-platform που θα μπορούσε να λειτουργήσει με JavaScript, HTML και CSS.

Το Electron.js ονομάστηκε αρχικά Atom Shell και έγινε ανοιχτού κώδικα το 2014. Το έργο μετονομάστηκε αργότερα σε Electron τον Απρίλιο του 2015 και το πρώτο του API κυκλοφόρησε το 2016.

Χαρακτηριστικά του Electron JS

  • Συμβατό με όλες τις βιβλιοθήκες και τα πλαίσια JavaScript. Το Vue.js, το Angular και το React.js είναι απλώς παραδείγματα πλαισίων JavaScript που μπορούν να χρησιμοποιήσουν οι προγραμματιστές μαζί με το Electron JS. Αυτή η συμβατότητα καθιστά εύκολη τη χρήση των δυνατοτήτων/λειτουργιών αυτών των βιβλιοθηκών και πλαισίων κατά τη δημιουργία μιας εφαρμογής Electron.
  • Επαναχρησιμοποιήσιμο πλαίσιο. Η κάλυψη των αναγκών διαφορετικών πελατών μπορεί να είναι ακριβή. Το καλό με το Electron JS είναι ότι μπορεί να χρησιμοποιηθεί τόσο για εφαρμογές web όσο και για επιτραπέζιους υπολογιστές. Η ενιαία βάση κώδικα σημαίνει ότι μπορεί επίσης να χρησιμοποιηθεί σε διαφορετικά λειτουργικά συστήματα.
  • Έχει πρόσβαση σε εγγενή API. Οι προγραμματιστές που εργάζονται στο Electron JS έχουν πρόσβαση σε εγγενή API των λειτουργικών συστημάτων στα οποία λειτουργούν. Οι προγραμματιστές μπορούν έτσι να δημιουργήσουν εφαρμογές για επιτραπέζιους υπολογιστές που έχουν παρόμοια πρόσβαση σε λειτουργίες χαμηλού επιπέδου, όπως η εμφάνιση ειδοποιήσεων.
  • Υποστηρίζει τεχνολογία web. Το Electron JS είναι προσαρμόσιμο, καθώς οι προγραμματιστές δεν χρειάζεται να μάθουν μια νέα γλώσσα προγραμματισμού για να αναπτύξουν εφαρμογές. Ως εκ τούτου, σημαίνει ότι εάν κατανοείτε ένα συγκεκριμένο πακέτο γλώσσας που χρησιμοποιείτε ήδη για τη δημιουργία εφαρμογών ιστού, μπορείτε επίσης να το χρησιμοποιήσετε για να δημιουργήσετε μια εφαρμογή για υπολογιστές.
  • Διαχείριση κώδικα και εφαρμογών. Δεν χρειάζεται να διατηρείτε διαφορετικές ομάδες για να διατηρείτε εφαρμογές και κώδικα για διαφορετικά λειτουργικά συστήματα. Το Electron JS σάς επιτρέπει να διατηρείτε την ίδια βάση κώδικα για λειτουργικά συστήματα Linux, Windows και Mac.
  • Εύκολη κατασκευή/ανάπτυξη. Ο διαχειριστής πακέτων Electron βοηθά τους προγραμματιστές να συσκευάζουν τα αντίστοιχα πακέτα τους. Μπορείτε επομένως να απελευθερώσετε μια εφαρμογή για υπολογιστές Linux, Mac και Windows από την ίδια βάση κώδικα χρησιμοποιώντας αυτόν τον διαχειριστή πακέτων.
  Πώς να ενεργοποιήσετε και να χρησιμοποιήσετε τη δυνατότητα πρόσβασης στο iPhone X

Αρχιτεκτονική Electron JS

Η αρχιτεκτονική του Electron είναι πολύ παρόμοια με αυτή ενός σύγχρονου προγράμματος περιήγησης ιστού, καθώς κληρονομεί την αρχιτεκτονική πολλαπλών διεργασιών του από το Chromium.

Η αρχιτεκτονική του Electron περιλαμβάνει V8 JavaScript Engine, Node.JS και Libchromiumcontent.

  • Node.JS– ένας χρόνος εκτέλεσης JavaScript ανοιχτού κώδικα που εκτελείται στη μηχανή JavaScript V8. Το Node.JS επιτρέπει στους προγραμματιστές να εκτελούν JavaScript έξω από ένα παράθυρο του προγράμματος περιήγησης. Το Node.JS επιτρέπει επίσης στους χρήστες να εκτελούν ακατέργαστο κώδικα JavaScript μέσω του διαδραστικού του κελύφους.
  • Libchromiumcontent- μια βιβλιοθήκη απόδοσης Chromium που είναι ανοιχτού κώδικα και διατηρείται από το Google Chrome. Το Chrome έχει μια μινιμαλιστική διεπαφή χρήστη και χρησιμοποιεί το blink ως μηχανή διάταξης και το V8 ως μηχανή JavaScript.
  • V8 JavaScript Engine – μια μηχανή JavaScript ανοιχτού κώδικα γραμμένη σε C++ και JavaScript και αναπτύχθηκε από την Google.

#1. Node.js

Για να ξεκινήσετε με το Electron JS, πρέπει να έχετε εγκατεστημένο το Node.js στον τοπικό σας υπολογιστή.

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

Ελέγξτε εάν το Node.js έχει εγκατασταθεί σωστά εκτελώντας αυτές τις εντολές.

node -v
npm -v

Εάν εγκατασταθούν σωστά, αυτές οι εντολές θα εμφανίζουν τις εκδόσεις κόμβου και npm, αντίστοιχα.

#2. Γραμμή εντολών

Ο τρόπος πρόσβασης στη γραμμή εντολών θα εξαρτηθεί από το λειτουργικό σας σύστημα.

  • Το Linux θα εξαρτηθεί από τη διανομή.
  • Windows: PowerShell ή Γραμμή εντολών.
  • macOS: Τερματικό.

Ορισμένα προγράμματα επεξεργασίας κώδικα, όπως το Visual Studio Code, διαθέτουν ένα ενσωματωμένο τερματικό.

#3. Επεξεργαστής κώδικα

Χρειάζεστε έναν επεξεργαστή κώδικα για να γράψετε τον κωδικό Electron JS. Το Visual Studio Code είναι από τα καλύτερα που μπορείτε να δοκιμάσετε.

Πώς να εγκαταστήσετε το Electron JS

Βήμα 1: Δημιουργήστε ένα έργο node.js.

Χρησιμοποιήστε αυτές τις εντολές για να ξεκινήσετε.

mkdir my-electron-app && cd my-electron-app
npm init

Η εντολή npm init θα σας ζητήσει να συμπληρώσετε ορισμένα πεδία, όπως το όνομα, το σημείο εισόδου και την περιγραφή της εφαρμογής.

  Πώς να ρυθμίσετε και να καλέσετε οικιακές επαφές χρησιμοποιώντας το Google Assistant

Μπορείτε να επιλέξετε το προεπιλεγμένο όνομα του φακέλου σας ως όνομα της εφαρμογής σας. Ωστόσο, θυμηθείτε να ορίσετε το σημείο εισόδου της εφαρμογής σας ως main.js.

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

{
"name": "my-electron-app",

  "version": "1.0.0",

  "description": "Hello World!",

  "main": "main.js",

  "author": "Peter Drury",

  "license": "MIT"

}

Βήμα 2: Εγκατάσταση ηλεκτρονίου

Χρησιμοποιήστε αυτήν την εντολή.

npm install --save-dev electron

Βήμα 3: Προσθέστε την εντολή “start” στο package.json σας

{

  "scripts": {

    "start": "electron ."

  }

}

Βήμα 4: Ξεκινήστε την εφαρμογή σας

Χρησιμοποιήστε αυτήν την εντολή για να ξεκινήσετε την εφαρμογή σας σε λειτουργία ανάπτυξης

npm start

Διαδικασία εργασίας Electron JS

Θα συνεχίσουμε να χτίζουμε την εφαρμογή από τη ρύθμιση που μόλις κάναμε παραπάνω. Μια εφαρμογή Electron έχει δύο τύπους διεργασιών. κύρια και απόδοση.

Η κύρια διαδικασία

Το κύριο σενάριο είναι το σημείο εισόδου οποιασδήποτε εφαρμογής ηλεκτρονίων. Η εφαρμογή θα εκτελείται σε πλήρες περιβάλλον Node.js. Το Electron θα αναζητήσει το κύριο σενάριο στο αρχείο package.json που έχετε ήδη διαμορφώσει κατά τη διάρκεια του ικριώματος εφαρμογής.

Δημιουργήστε main.js στον ριζικό φάκελο για να αρχικοποιήσετε το κύριο σενάριο. Μπορείτε να το κάνετε χειροκίνητα ή να χρησιμοποιήσετε αυτήν την εντολή.

touch main.js

Μπορείτε να προσθέσετε τον ακόλουθο κώδικα στο main.js

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

const createWindow = () => {

 const win = new BrowserWindow({

   width: 800,

   height: 600,

 });

 win.loadFile('index.html');

};

app.whenReady().then(() => {

 createWindow();

 app.on('activate', () => {

   if (BrowserWindow.getAllWindows().length === 0) {

     createWindow();

   }

 });

});

app.on('window-all-closed', () => {

 if (process.platform !== 'darwin') {

   app.quit();

 }

});

Οι ιστοσελίδες στο Electron μπορούν να φορτωθούν είτε από μια απομακρυσμένη διεύθυνση Ιστού είτε από ένα τοπικό αρχείο HTML. Θα χρησιμοποιήσουμε ένα τοπικό αρχείο HTML για σκοπούς επίδειξης.

Δημιουργήστε ένα αρχείο index.html στον ριζικό σας φάκελο. Ο κώδικας για το index.html παρέχεται πάντα, αλλά μπορείτε να τον έχετε ως αρχικό κωδικό.

<!DOCTYPE html>

<html>

 <head>

   <meta charset="UTF-8" />

   <meta

     http-equiv="Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <meta

     http-equiv="X-Content-Security-Policy"

     content="default-src 'self'; script-src 'self'"

   />

   <title>Hello from Electron renderer!</title>

 </head>

 <body>

   <h1>Hello from Electron renderer!</h1>

   <p>👋</p>

   <p id="info"></p>

 </body>

 <script src="https://wilku.top/introduction-to-electron-js-complete-guide-and-learning-resources/./renderer.js"></script>

</html>

Διαδικασία απόδοσης

Το Renderer αποδίδει περιεχόμενο ιστού. Τα σενάρια προφόρτωσης συνοδεύονται από κώδικα που εκτελείται σε μια διαδικασία απόδοσης προτού ξεκινήσει η φόρτωση του περιεχομένου Ιστού.

Δημιουργήστε το preload.js στον ριζικό φάκελο και προσθέστε αυτόν τον κώδικα.

window.addEventListener('DOMContentLoaded', () => {

  const replaceText = (selector, text) => {

    const element = document.getElementById(selector)

    if (element) element.innerText = text

  }

  for (const type of ['chrome', 'node', 'electron']) {

    replaceText(`${type}-version`, process.versions[type])

  }

})

Εκτελέστε τον διακομιστή ανάπτυξης χρησιμοποιώντας npm start, και αυτό θα εμφανιστεί

Παραδείγματα εφαρμογών: Electron JS

#1. Slack εφαρμογή επιφάνειας εργασίας

Το Slack είναι ένα από τα πιο δημοφιλή εργαλεία απομακρυσμένης συνεργασίας. Οι χρήστες μπορούν να στέλνουν και να λαμβάνουν μηνύματα, να πραγματοποιούν κλήσεις και να μοιράζονται αρχεία χρησιμοποιώντας αυτήν την εφαρμογή. Το Slack διαθέτει εφαρμογές που βασίζονται στον ιστό και για επιτραπέζιους υπολογιστές σε λειτουργικά συστήματα Mac, Linux και Windows. Η εφαρμογή επιτραπέζιου υπολογιστή του Slack χρησιμοποιεί τη μηχανή Chromium και το Node.js για την απόδοση κώδικα υψηλής ποιότητας.

  Πώς να ρυθμίσετε ένα χρονόμετρο στο ζουμ

#2. Εφαρμογή επιτραπέζιου υπολογιστή WordPress

Το WordPress είναι το μεγαλύτερο σύστημα διαχείρισης περιεχομένου. Το γεγονός ότι μπορείτε να ξεκινήσετε έναν ιστότοπο ακόμη και χωρίς βασικές δεξιότητες κωδικοποίησης έχει προσελκύσει πολλούς χρήστες. Η πρόσβαση στο WordPress είναι δυνατή μέσω του προγράμματος περιήγησης και μέσω εφαρμογών επιτραπέζιου υπολογιστή σε Mac, Linux και Windows. Η ανανεωμένη επιφάνεια εργασίας WordPress χρησιμοποιεί Electron JS.

#3. Εφαρμογή για υπολογιστές WhatsApp

Το WhatsApp είναι μια από τις πιο δημοφιλείς εφαρμογές ανταλλαγής μηνυμάτων στον σύγχρονο κόσμο, καθώς χρησιμοποιείται από πάνω από 2 δισεκατομμύρια ανθρώπους. Το WhatsApp σχεδιάστηκε αρχικά ως εφαρμογή για κινητά, αλλά τώρα έχει μετατραπεί σε πλατφόρμα μεταξύ συσκευών. Το WhatsApp desktop χρησιμοποιεί το Electron JS και είναι διαθέσιμο σε μεγάλα λειτουργικά συστήματα.

#4. Κωδικός Visual Studio

Το Visual Studio Code, που ανήκει στη Microsoft, είναι από τους πιο δημοφιλείς επεξεργαστές κώδικα. Το Visual Studio Code υποστηρίζει HTML, CSS και κώδικα γραμμένο σε διάφορες γλώσσες προγραμματισμού όπως JavaScript, Python, PHP, Java και Ruby, για να αναφέρουμε μερικές. Η εφαρμογή για υπολογιστές, που δημιουργήθηκε με χρήση του Electron JS, είναι διαθέσιμη για λειτουργικά συστήματα Windows, Mac και Linux.

Πόροι μάθησης: Electron JS

#1. Επίσημη Τεκμηρίωση Electronjs

Η τεκμηρίωση της Electronjs δημιουργείται και διατηρείται από την Electronjs.org. Θα μάθετε τι είναι το Electron JS, πώς να ρυθμίζετε την πρώτη σας εφαρμογή Electron και πώς να δημιουργείτε εφαρμογές για επιτραπέζιους υπολογιστές πολλαπλών πλατφορμών χρησιμοποιώντας διάφορες τεχνολογίες. Η τεκμηρίωση ενημερώνεται πάντα κάθε φορά που εισάγεται μια βελτίωση ή μια νέα δυνατότητα.

#2. Master Electron: Εφαρμογές επιφάνειας εργασίας με HTML, JavaScript & CSS

Το Master Electron είναι ένα μάθημα επί πληρωμή για το Udemy που σας εισάγει στο Electron JS. Θα μάθετε πώς να δημιουργείτε εφαρμογές επιφάνειας εργασίας για διαφορετικά λειτουργικά συστήματα, όπως Mac, Linux και Windows. Το Master Electron είναι επίσης ο τέλειος πόρος εάν θέλετε να κατανοήσετε ολόκληρη τη διαδικασία του Electron API.

#3. Εκμάθηση Electron React

Το Electron React είναι μάθημα επί πληρωμή για το Udemy που διδάσκει στους προγραμματιστές πώς να δημιουργούν εφαρμογές Electron χρησιμοποιώντας το React.js. Η React είναι μια από τις πιο διάσημες βιβλιοθήκες JavaScript και δημιουργήθηκε από τη Meta (πρώην Facebook).

Τυλίγοντας

Το Electron JS είναι μια καταπληκτική βιβλιοθήκη JavaScript για τη δημιουργία εφαρμογών για επιτραπέζιους υπολογιστές σε έναν σύγχρονο κόσμο όπου οι εφαρμογές πολλαπλών πλατφορμών πρέπει να αγκαλιάζονται. Το γεγονός ότι μπορείτε να χρησιμοποιήσετε HTML, CSS και JavaScript σημαίνει ότι οι προγραμματιστές δεν χρειάζεται να μάθουν νέες στοίβες τεχνολογίας για να δημιουργήσουν τέτοιες εφαρμογές. Η παρουσία μιας μεγάλης και υποστηρικτικής κοινότητας είναι επίσης ένα πλεονέκτημα, καθώς έχετε πάντα εγγυημένη υποστήριξη.

Μπορείτε επίσης να εξερευνήσετε μερικά καλύτερα πλαίσια JavaScript για να δημιουργήσετε μια σύγχρονη εφαρμογή σε λιγότερο χρόνο.